Product

G마켓 디자인 시스템 웹사이트를 만나보세요!

Next GDS 진행 과업 중 하나인 도큐먼트 자체 웹사이트(Living Documentation) 구축이 완료되었습니다. 작업자들이 G마켓 애플리케이션 내 중추 역할인 파운데이션부터 컴포넌트, 아이콘에 이르기까지 쉽게 탐색하며 해당 라이브러리까지 바로 진입 가능하도록 동선을 최적화하였습니다. GDS 사이트 구축까지의 고민들과 결과물을 공유합니다.

웹사이트 구축 배경

GDS는 기존 아티클에서도 볼 수 있듯이 아래 3개의 원칙에 맞춰 제작된 시스템입니다.

①일관성 – 브랜드 정체성과 사용성
GDS는 G마켓의 브랜드 정체성에 기초하여, 프로덕트의 사용성 높입니다. 이로 인해 파운데이션 및 컴포넌트가 모여 일관된 형상 및 패턴과 사용자 경험을 제공할 수 있습니다.

②확장성 – 공동 라이브러리 자산
GDS는 사용자와 작업자의 니즈에 따라 지속해서 유지 및 관리합니다. GDS 내 공동 자산인 디자인 가이드라인과 컴포넌트 라이브러리, 리소스를 일관되게 지속해 유지합니다.

③효율성 – 재사용성과 생산성
GDS 자산을 재사용하여 작업자는 구조적 관점에서 사용자 경험을 고민할 수 있는 시간을 확보합니다. 작업자의 생산성과 효율성 높여, 프로덕트 및 사용자 경험을 강화합니다.

이렇게 일관성, 확장성, 효율성을 극대화하기 위해 사용한 방법은 가이드라인 웹 구축이었는데요. 내부 작업자들이 GDS를 잘 사용할 수 있게 만들어주는 도구로써 웹사이트를 선택한 이유는 실시간 탐색이 용이하다는 점이 컸습니다. 디자인 라이브러리로는 브랜드/파운데이션/컴포넌트 등 분절되어 있어 공통 탐색이 불가하고 논의사항이나 업데이트 사항은 Notion으로 관리되고 있기 때문에 이를 묶어주는 하나의 채널이 필요했습니다.

웹사이트 내에서 작업자들은 네비게이션을 통해 손쉽게 컴포넌트를 탐색하거나, 검색창을 통해 공동 검색 결과를 얻을 수 있습니다. 특히나 새로운 디자이너들의 온보딩에서 기존에는 매번 작업 파일들을 찾아가며 히스토리 파악하는 어려움을 가졌었다면, 이제는 따로 학습에 필요한 커뮤니케이션 비용 필요 없이 웹 다큐멘테이션을 통해 업무에 사용할 컴포넌트들을 빠르게 파악할 수 있습니다.

제작 과정

자체 웹사이트 구축

GDS 내 콘텐츠의 추가/수정이 빈번하지 않을 예정이고, 그러한 업데이트도 개발자-디자이너 간의 동기화가 필요한 부분이기에 외부 솔루션을 사용하지 않고 자체 사이트 구축을 진행하였습니다. 이 때문에 누구 한 명 / 직업군의 의견이 아닌, 서로 작업자들 간의 sync된 디자인 시스템 공유할 수 있는 이점도 있습니다. 하지만 현재의 사이트는 전체 직업군보다는 디자이너의 사용성에 초점이 맞춰진 사이트다 보니 개발자분들의 확인이 용이한 코드 리소스 가이드(Storybook)에 대한 니즈가 커지면 이 부분도 함께 공개 전환을 고민 중에 있습니다.

최적화된 동선 제공

GDS 웹사이트는 도큐먼트로서의 역할만이 아닌, 해당 라이브러리 바로 이동이 가능하여 도큐먼트 효율을 높였습니다. 홈 메인, 라이브러리가 제공되는 도큐먼트, 리소스 페이지에서 진입 경로를 열어두었기 때문에 언제든지 작업에 필요한 라이브러리 빠르게 접근이 가능합니다.

아마 외부에서 보는 분들은 해당 사이트에서 디자인 라이브러리로의 진입점을 볼 수 없어 상단에 적힌 동선에 대해 의아하실 텐데요. 현재에는 버전 관리 및 보안 유지를 위해 사내망에서만 볼 수 있는 사이트로 분기 처리되어 있습니다. 외부 공개용에 대한 라이브러리는 추후 공개할 예정이니 기다려 주세요!

가이드라인 콘텐츠

웹 페이지 내의 내용은 디자이너와 개발자가 Sync가 된 규칙들이며, 아래 리스트들을 상세하게 설명하고 있습니다. 각 페이지 하단에 담당자를 명시해놓아 파운데이션, 컴포넌트 가이드라인 학습 중 문의가 필요한 부분은 쉽게 담당자를 찾아 문의할 수 있습니다.

• 소개 (Usage) : 컴포넌트 이름과 해당 컴포넌트의 규정 포함합니다.
• 사례 (Variant) : 컴포넌트 상태 및 기타 수치에 관한 내용을 포함합니다.
• 디자인 레퍼런스(Usage Guideline, Behavior) : 사용 예시, Do&Don’t, Spec 등에 관한 가이드라인을 포함합니다.

 도큐먼트 콘텐츠 예시

반응형 웹으로 여러 해상도 대응

GDS 사이트는 반응형 웹으로 구축하여 데스크탑에서 여러 화면 사용 시에도 최적화된 가이드를 확인할 수 있습니다. 이는 작업자들이 디바이스 제약 없이 확인하면서 작업할 수 있다는 장점도 포함합니다.
또한 현재 코드 리소스(Storybook)의 QA가 완료되면 앞으로의 웹사이트에서 GDS 컴포넌트의 실제 인터랙션이 가능케 할 예정인데요. 이후에는 모바일 화면에서 작업자들이 서비스 설계 전 미리 컴포넌트를 디바이스에서 확인 해 테스트 해보길 기대하고 있습니다!

마치며

현재 버전 1.0.0에는 아직 정리안 된 부분들은 포함하고 있지 않은데요. 지속해서 Working Group이 함께 고민해서 GDS 원칙에 맞춘 방향으로 업데이트 해나갈 예정입니다. 또한 가이드라인의 효율을 최대화하기 위해 이전 아티클에서도 강조하듯, 조직 전반에 걸쳐 공통의 이해가 필요한 부분이 많은데요. 그에 대한 방안(밋업, 메일링 시스템)도 고민하고 발전시켜 나갈 예정입니다. 앞으로도 GDS가 멈춰있지 않고 발전해나갈 수 있게 많은 의견, 조언 부탁드리며, 효율적이고 생산성 높은 조직을 만들기 위해 고생하는 Woring Group 멤버분들에게 감사의 인사를 드립니다!

글 작성자

구경하Design POD

프로젝트 참여자

Design
구경하, 권기석, 김보미, 조은별, 이진아, 조은별

Developer
김승민, 곽현철, 유동완