NHN 커머스 디자인 시스템 스캔하기

디자인 시스템이란, 기업의 비전을 시각적으로 보여주면서 브랜드의 일관된 비주얼 아이덴티티를 유지하는 체계입니다. 익히 알려진 유수 브랜드들은 대부분 이 디자인 시스템을 사용하고 있는데요. 하나의 시각적 이미지를 만들기 위해 기획자, 디자이너, 개발자 등 다양한 역할이 동원되는 만큼 브랜드의 통일성을 유지하기 위해선 공유된 시스템이 필요한 것이죠.

오늘은 NHN 커머스에서 채택하고 있는 디자인 시스템과 함께 사용자의 편의성과 업무 효율을 위해 어떠한 노력이 필요한지 함께 알아보도록 하겠습니다.



NCDS: NHN COMMERCE DESIGN SYSTEM(2025 1Q ver.)

공식 사이트가 심플하면서도 비어 보이지 않는 이유는 무엇일까요? 왜냐하면 보고 계시는 모든 요소는 전부 규칙 안에 만들어졌기 때문입니다. 예를 들면 로고, 폰트, 색상, 헤더, 버튼, 체크 박스 등 작은 것 하나에도 어느 상황에 어떻게 활용할 것인지에 대한 정의가 있죠. 다음은 NHN 커머스 디자인 시스템 요소와 그 속의 이야기를 함께 살펴볼게요.

1. Colors 색상

ⓒNHN 커머스

색상은 크게 Primary color, Secondary color, Neutrals로 나뉩니다. Primary color는 브랜드의 핵심이 되는 가장 기본 색상으로 버튼, 링크, 입력 등 사용자가 직접 상호작용하는 대화형 요소에 사용됩니다. 브랜드 정체성을 강조하는 데 특히 중요한 역할을 하죠. Secondary color는 Primary color를 보완함과 동시에 경고, 라벨, 알림 등 보조 색상으로 선택합니다. Neurals는 무채색이자 색상 시스템의 기초가 되는 색상으로 전체적인 디자인 균형을 맞추는 역할을 하며 배경, 텍스트, 테두리 등의 요소에 적용됩니다. 주로 사용하는 색상 코드는 아래와 같습니다.

💡 사용 예시

ⓒNHN 커머스

NHN 커머스 공식 사이트에 적용된 컬러 시스템입니다. 버튼, 배경, 폰트 등 다양한 UI 요소에서 일관된 컬러 팔레트가 활용되었으며 채도 높은 블루와 무채색 계열을 중심으로 디자인해 세련된 느낌을 강조했습니다. 또한 사이트에서 가장 중요한 액션을 유도하는 버튼에는 상대적으로 눈에 띄는 레드 컬러를 사용해 사용자의 시선을 효과적으로 유도하고 있습니다. 이렇듯 명확한 대비와 색상 활용을 통해 정보의 우선순위를 강조할 수 있습니다.

2. Typography 타이포그래피

ⓒNHN 커머스

💡 사용 예시

ⓒNHN 커머스

NHN 커머스 사이트에 적용된 타이포그래피입니다. 크기와 굵기의 차이를 통해 제목과 본문 즉 계층 구조를 명확히 구분한 것을 확인할 수 있습니다. 오로지 하나의 폰트 스타일을 적용함으로써 전체적인 디자인에 통일성을 부여하면서 깔끔하고 정돈된 인상을 강화했습니다. 가독성 높은 타이포그래피는 콘텐츠를 직관적으로 이해할 수 있도록 도와주죠.

3. Header navigation 헤더 내비게이션

ⓒNHN 커머스

화면의 주축이 되는 상단 메뉴를 ‘헤더 내비게이션’이라고 부릅니다. 심플해 보이지만 아무것도 클릭하지 않았을 때, 클릭했을 때, 로그인 후 프로필 아이콘을 클릭했을 때, 전체 메뉴 아이콘을 클릭했을 때 보여지는 언더바, 드롭다운 메뉴 이미지에 대한 정교한 규칙이 존재합니다. 하위 메뉴에서도 세부 항목과 메뉴 타이틀, 본문의 크기와 컬러에 차이를 주어 계층 구조를 명확하게 구분했습니다.

💡 사용 예시

ⓒNHN 커머스

실제 NHN 커머스 공식 사이트에서 보여지는 메뉴입니다. 디자인 시스템에서 정의한 폰트 크기와 아이콘, 언더바, 드롭다운 메뉴 이미지를 사용한 것을 알 수 있죠. 이처럼 가독성을 높이는 체계를 활용함으로써 다양한 카테고리와 복잡한 정보에도 사용자가 원하는 정보를 쉽게 찾을 수 있고요. 메뉴 선택 시 언더바를 통한 시각적 피드백을 주어 현재 위치한 사이트 경로도 쉽게 파악할 수 있도록 했습니다.

4. Badges 배지

ⓒNHN 커머스

배지는 상태의 중요성 및 이벤트 강조를 나타내는 레이블이며 콘텐츠에 대한 사용자의 빠른 인식을 돕기 위해 사용됩니다. NHN 커머스의 배지는 알약형과 사각형 모양, 채워진 버전과 선만 사용된 버전 등 형태가 다양한데요. 신규, 업데이트, 경고, 주의, 이벤트 등 상황에 따라 총 5가지의 색상을 적용하며 각 배지는 아이콘과 함께 사용할 수 있다는 규칙이 있습니다.

💡 사용 예시

ⓒNHN 커머스

NHN 커머스는 할인, 무료 이벤트와 같은 프로모션과 서비스 업데이트를 자주 진행하는 만큼 그린 컬러와 퍼플 컬러를 적극적으로 사용합니다. 그린 컬러는 서비스 업데이트와 같은 변화 사항을 보여주고, 퍼플 컬러는 프로모션, 이벤트를 나타내죠. 또한 배경 색상과의 조화를 위해 배지 색상을 다르게 적용함으로써 명확하게 정보를 인지할 수 있도록 했습니다. 자세한 비주얼이 궁금하다면 고도몰 신청 화면에서 확인해 보세요!

5. Carousel 캐러셀

ⓒNHN 커머스

캐러셀의 원뜻은 회전목마로, 웹사이트나 앱에서 다수의 이미지, 비디오, 텍스트를 일정한 간격으로 보여주는 슬라이더를 의미합니다. 흔히 스크롤 없이도 많은 양의 정보를 보여주면서 자연스럽게 관심을 유도할 때 사용되는 방법인데요. NHN 커머스 디자인 시스템에선 현재 사용자가 어디까지 콘텐츠를 보고 있는지 진행률을 확인할 수 있고 직접 이미지를 넘길 수 있는 컨트롤 기능이 있으며 타이틀과 함께 버튼을 배치해 정보를 쉽게 이해할 수 있도록 설계되어 있습니다.

💡 사용 예시

ⓒNHN 커머스

NHN 커머스 사이트에서 확인할 수 있는 캐러셀의 모습입니다. 상단에 배치된 스토어 화면으로 쇼핑몰 모바일 앱 제작 서비스, 마이앱에 대한 정보를 강조하며 직관적인 이미지와 텍스트를 통해 핵심 내용을 전달합니다. 하단의 이미지는 최근 출시된 고도몰 무료 스킨 캐러셀인데요. 여러 개의 스킨 디자인을 순차적으로 보여줌으로써 다양한 옵션을 쉽게 비교할 수 있어 가독성과 탐색의 편의성을 극대화했습니다.

지금까지 NHN 커머스 디자인 시스템 중 5가지 항목에 대해 살펴보았는데요. 실제 최근 NHN 커머스 웹사이트가 지디웹 디자인 어워즈에서 위너프라이즈를 수상🏆하는 영예를 안기도 했습니다. 단순해 보여도 결국 디자인 시스템의 디테일함이 사이트의 완성도를 결정짓는 중요한 부분임을 알 수 있죠.

하지만 NHN 커머스는 여기서 그치지 않고 더 유익한 콘텐츠와 함께 지속적으로 디자인 시스템을 발전시켜 나갈 예정입니다. 기획자, 개발자, 디자이너들의 손에서 한층 더 진화할 NHN 커머스 공식 사이트에 많은 기대와 관심 부탁드리겠습니다. 😉