ko/design.md
한국 서비스의 시그니처 디자인을 LLM 컨텍스트로.
한 번의 클릭으로 design.md 전체를 복사해 그대로 붙여넣으세요.
또는 Claude Code·Cursor·Codex 등에서 use-design-md 스킬로 카탈로그 디자인을 현재 프로젝트에 바로 적용하세요.
npx skills add CaesiumY/ko-design-md
그리팅은 기업의 채용 담당자가 하루 여덟 시간 붙들고 있는 채용 관리 SaaS이고, 면접 진행 상태를 색 토큰으로 못 박아 도메인을 팔레트 층까지 끌어내린 흰 바탕·헤어라인의 업무 도구다. 사용자는 소비자가 아니라 기업의 채용 담당자이며, 제품은 가이드 카테고리 네비가 1~5로 번호 매겨 열거하는 채용(ATS)·채용 홈페이지(Homepage)·설문(Form)·인재영입(TRM)·분석(Analytics) 다섯 모듈로 나뉜다.
여기어때는 GC COMPANY가 운영하는 여행·숙박 플랫폼이고, 그 디자인 시스템 YDS는 지도 위 가격 마커와 활기찬 Lively red를 시그니처로 삼는다. Design Library는 컴포넌트 라이브러리가 아니라 디자인 시스템 + 비주얼 시스템 + 브랜드 가이드를 한곳에 모은 아카이브로 스스로를 정의한다 — "플랫폼 디자이너들이 직접 만든 디자인 시스템, 비주얼 시스템, 그리고 브랜드 가이드를 한곳에 모아둔 여기어때만의 아카이브". 운영 주체는 플랫폼 디자인 팀(Platform Design Team)이며, 모든 페이지 푸터가 사내 Slack 채널과 팀 이메일로 고정된다. 선언된 스코프도 같은 방향이다 — 디자인 컴포넌트부터 그래픽, 보이스 앤 톤까지 하나의 시스템 아래 통합하는 것을 목표로 삼는다. 사이트가 내건 표어는 "Millions ways, One system"이고, 그래픽 시스템의 자기 규정은 "A Visual Language for Travel"이다.
코드잇은 프로그래밍 교육 서비스이며, design.codeit.com은 그 공개 디자인 시스템 사이트다(Framer 호스팅, 전 문서 한국어). 슬로건은 "배움의 기쁨을 세상 모두에게"이며, 시스템 자체를 "'배움의 기쁨'을 일관되게 전하기 위한 약속"으로 정의한다. "명확한 원칙과 유연한 컴포넌트로 협업을 효율화하고, 더 나은 사용자 경험을 제공"하는 것이 목적이다.
클래스101은 취미부터 커리어까지 25개 카테고리의 온라인 클래스를 다루는 플랫폼으로, 2022년 8월 말 "클래스101+"라는 이름의 월 구독 모델(25개 카테고리 무제한 수강)로 전환했다. 영문 사이트가 CLASS101+ 브랜드로 운영되는 글로벌 서비스이고, 컴포넌트 내장 텍스트의 기본 언어는 한국어이며 ConfigProvider가 한국어·영어·일본어 번역 사전을 제공한다 — 한국어 우선에 글로벌 확장을 얹은 구조가 시스템 레벨에 새겨져 있다. 브랜드의 축은 크리에이터 이코노미 서사다: 크리에이터의 콘텐츠가 정당한 가치를 받는 생태계 지속가능성을 2018년부터 명문화해 왔다.
Bezier는 채널톡의 사내 제품 UI를 외부에 그대로 공개한 드문 한국발 풀 디자인 시스템이다 — 라이선스는 Apache-2.0(© Channel Corp.)이며, 컴포넌트 59 + foundation 3 + utility(ReadMe·Changelog) 2 = 64 docs, 아이콘 602 SVG(0.60.0 기준), 빌드 CSS 변수 450개 규모다. 이 수치는 실측이다 — Storybook 인덱스의 docs 엔트리 64개가 components 59 + foundation/alpha-foundation 3 + ReadMe/Changelog 2로 정확히 갈리고, @channel.io/bezier-tokens 0.6.0의 기본 엔트리 CSS가 변수 450개를 발행한다. (핸드오프 번들이 세던 "토큰 JSON 39종"은 공개 배포물로 재현되지 않아 뺐다 — npm 패키지는 JSON을 1개만 싣고 토큰을 CSS·SCSS·JS로 발행한다. 39는 beta tier의 --dimension-* 변수 개수와는 일치하나 같은 대상을 세었다는 근거가 없다.) 토큰을 별도 패키지로 떼어내 라이트·다크 멀티 테마를 1급으로 다루는 성숙한 시스템이다.
Kyobo Design System(KDS)은 교보문고의 디자인 시스템이며, 브랜드명(교보문고 / KYOBO Book Centre)과 디자인 시스템명은 별개의 이름이다. 교보문고는 1980년 설립된 한국 최대 서점 체인으로, 오프라인 서점·온라인 서점·전자책(sam / 교보 eBook)과 라이프스타일 리테일 서브브랜드 핫트랙스(Hottracks)를 아우르는 옴니채널 커머스 사업자다.
11번가(11STREET)는 SK Group 계열사가 운영하는 모바일 우선의 종합 이커머스 마켓플레이스이며, 디자인 시스템의 목적은 "고객에게 효율적인 커뮤니케이션과 일관되고 통일된 디자인으로 서비스 경험을 제공"하는 데 있다. 브랜드 가치는 Technology, Trust, Hope 세 단어로 정의되며, Street Sign(이정표)을 형상화한 로고는 다양한 상품과 차별적인 서비스로 새로운 라이프스타일을 안내한다는 메시지를 미니멀하게 표현한다.
라인의 디자인 시스템은 두 갈래로 나뉜다. LDSM(LINE Design System for Messenger)은 라인 메신저 본체의 시스템이고, LDSG(LINE Design System for Global Family Service)는 LY Corporation 산하 글로벌 패밀리 서비스가 동일한 UX 표준을 공유하도록 설계된 공용 시스템이다. 여기서 "패밀리 서비스"는 단일 메신저 스킨이 아니라 Messenger·LINE Pay·LINE Music·LINE Manga·LINE Shopping 등 라인 계열 앱 전반을 가로지르는 크로스-프로덕트 레이어를 가리킨다. 목표는 모든 패밀리 서비스가 "같은 가족의 일부처럼" 느껴지게 하면서도, 각 제품이 자기만의 Primary 컬러·브랜드 이미지·카피 톤을 재정의할 수 있게 하는 것이다. 본 카탈로그 항목은 LDSG에 한정한다 — LDSM의 "LINE Semantic Colors" 명명 체계나 다크모드 자동 매핑은 이 문서의 토큰 정의에 포함하지 않는다.
Gmarket Design System(GDS)은 지마켓(G마켓)의 디자인 시스템이며, 브랜드명(지마켓 / Gmarket)과 디자인 시스템명은 별개의 이름이다. 지마켓은 한국의 오픈마켓형 이커머스 서비스로, 고객과 상품·고객과 고객을 연결하는 쇼핑 경험의 "연결 주체(connection)"를 핵심 키워드로 삼는다. 브랜드 본질 가치는 'Connection(연결)'을 중심으로 Center(시장과 고객 일상의 중심), Forward(이커머스 흐름 선도), Variety(고객 각각의 삶에 맞는 다채로운 제안) 세 하위 가치로 구성된다.
SOCAR Frame 2.0(쏘카프레임 2.0)는 쏘카의 디자인 시스템이며, 브랜드명(쏘카 / SOCAR)과 디자인 시스템명은 별개의 이름이다. 쏘카는 한국 최대 카셰어링 서비스이며, 전국의 쏘카존(공용 차량 거점)을 기반으로 단기·왕복 차량 대여를 제공하는 한국형 모빌리티 플랫폼이다. 소비자용 카셰어링 제품과 SOCAR Business 라인을 함께 운영하며, 두 서비스는 토큰 세트에 {colors.service-socar}와 {colors.service-business} 색으로 각각 기록되어 있다.
배달의민족(배민)은 우아한형제들이 2010년부터 운영해 온 한국 점유율 1위 음식·생필품 배달 슈퍼앱이며, 디자이너 출신 김봉진 의장이 창업했다. 모회사·연혁은 우아한형제들 공식 사이트가 근거다. 음식배달을 주력으로 한그릇(최소주문금액 없는 1인분)·B마트(자체 물류 1시간 배송)·배민스토어(편의점·마트 즉시배송)·픽업·선물하기·배민클럽 멤버십이 한 앱 안에서 탭으로 묶여 있다.
당근은 주황 하나를 브랜드 축으로 붙들고, 사용자 신뢰를 10단계 온도 램프로 색칠해 UI 안에 박아 넣은 디자인 언어를 쓴다. SEED는 그 언어를 "당근 제품을 위한 통합 디자인 언어"로 정의하며, 디자인과 코드가 하나의 소스를 바라보게 만들어 누가 만들어도 같은 품질의 경험이 나오도록 하는 것을 목표로 삼는다.
스파르타클럽은 팀스파르타의 통합 소비자 브랜드로, 내일배움캠프, AI 입문/실무 강의, 재직자 캠프, 기업교육을 한 학습 여정 안에 묶는다. 디자인 시스템의 기준 surface는 마케팅 페이지가 아니라 수강생과 운영자가 쓰는 인증 대시보드이며, catalog → enrollment → learning dashboard → community → career로 이어지는 흐름을 전제로 한다.
원티드는 한국 디자인-엔지니어링 씬에서 정밀 스케일 토큰 시스템 + 자체 브랜드 서체 + 시그너처 그라디언트 로고의 조합으로 알려진다. 공식 문서는 이 시스템을 몽타주(Montage)로 명명하고 Extensibility·Consistency·Efficiency 3원칙 위에서 운영한다고 밝힌다. 공개 atomic 팔레트는 채도 0의 neutral 14단계 + cool blue-tinted coolNeutral 21단계 dual-neutral 구조에 hue ramp 11종(blue·red·green·orange·redOrange·lime·cyan·lightBlue·violet·purple·pink)을 얹으며 — blue만 14단계이고 나머지는 11~12단계다, 원티드랩이 자체 제작한 오픈소스 OFL 서체 Wanted Sans를 함께 운용한다. 시스템의 가장 인지 가능한 마크는 blue → magenta → orange 3-stop 그라디언트로 그려진 심볼이며, 이 그라디언트는 심볼·아바타·잡카드 썸네일 placeholder에만 적용되고 CTA·헤더·풀-블리드 표면에는 적용되지 않는다. 2025년 핸드오프 번들은 이 토큰 시스템 위에 components.css production 스타일시트로 23개 컴포넌트 그룹(버튼·폼·선택·칩/배지·아바타·툴팁·로딩·세그먼트/탭·페이지네이션·리스트셀·카드·디바이더·알림/토스트·모달/시트/메뉴·아코디언·테이블·브레드크럼·빈 상태)을 함께 ship하며, components.html 갤러리에서 light/dark 토글로 라이브 확인된다.
토스는 자신을 "은행에 다니는 유능한 친구" 로 포지셔닝한다 — 조용히 일을 처리하고, 사용자의 시간을 낭비시키지 않는다는 어조다. 슬로건과 카피 곳곳에 "투자, 모두가 할 수 있도록", "수수료 걱정 없이"와 같이 진입 장벽을 제거하는 메시지가 반복되며, "토스가 알아서"라는 위임형 표현이 사용자 부담을 줄이는 톤으로 일관된다. 이는 단순한 마케팅 카피가 아니라 인터페이스 전반의 의사결정 기준이다 — 정보 밀도보다 가독성과 행동 유도를 우선하고, "한번에 볼 수 있어요" 같은 통합 뷰 패턴이 반복되는 이유다.
Vapor는 시스템 자체의 정체성을 opinionated, light-first, very token-driven, proudly Korean-bilingual 로 정의한다. opinionated는 디자인 결정이 토큰 레벨에서 강하게 박혀 있다는 뜻이고, light-first는 다크 모드가 동등하게 지원되되 1차 환경은 화이트 캔버스라는 의미다. very token-driven은 product-facing 색상이 모두 시맨틱 alias로만 노출되어 raw 팔레트는 새 role을 만들 때만 직접 참조된다는 정책을 가리킨다.
KRDS는 중앙행정기관·공공기관·지방자치단체가 공유하는 단일 시각 언어로, 신뢰·안정·접근성을 핵심 정서로 삼는다. 톤은 "informational, neutral and respectful — not marketing" — 정보 전달과 절차 안내가 목적이며, 마케팅적 과장이나 유희적 표현은 배제한다. v1.0.0 핸드오프 번들은 38개 컴포넌트 프리뷰와 11개 패턴 페이지(포털 홈·로그인·회원가입·5단계 민원 신청 폼·신청 완료·게시판 목록/상세·마이페이지·고객센터·오류 페이지·모바일 홈)를 갖춘 포괄적 UI 킷으로 제공되며, 단일 컴포넌트부터 완성된 화면 흐름까지 동일한 토큰 체계 위에서 조립된다.