더블유아일랜드 · DESIGN SYSTEM

일관된 경험을 만드는
디자인 언어

컬러 · 타이포그래피 · 아이콘 · UX 라이팅까지, 직군이 달라도 누구나 같은 기준으로 화면을 만들 수 있도록 정리한 사내 디자인 시스템이에요. 라이트 모드를 만들면 다크 모드가 자동으로 매칭됩니다.

Color

색상 칩을 클릭하면 HEX 값이 복사돼요.

Primary · W-ISLAND Blue

UI 메인은 Deep Azure 500 (#1577cc) — 차분하고 흰 글씨 대비가 좋아 버튼·링크·선택 상태에 써요. 밝은 로고색 #1DA4FF는 400(브랜드 하이라이트)로 살려, 로고·강조 포인트에 사용합니다.

Secondary · Neutral Gray

보조(서포팅) 톤이에요. 라이트 모드의 배경·표면에 토스 스타일의 차분한 중립 그레이를 씁니다. 포인트는 W-ISLAND Blue가 담당해요.

Gray

라이트 모드를 기준으로 만들면, 매칭된 다크 모드 토큰이 자동으로 적용돼요. (위 우측 다크 모드 토글로 확인해 보세요.)

Transparency

기준 색상 #2A2C2F에 투명도(Opacity)를 조절해 사용해요. 경계선·딤드 배경 등에 활용합니다.

Semantic Color

역할 기반 토큰이에요. 원시 컬러를 직접 쓰지 말고 의미 토큰을 사용하면 다크 모드가 자동으로 맞춰집니다.

Text

TokenLightDark설명

Background

TokenLightDark설명

Border

TokenLightDark설명

Status

TokenLightDark설명

Diff

TokenLightDark설명

Typography

기본 서체는 Pretendard예요. 숫자·영문이 한글과 잘 어울리고 가독성이 좋아 사내 도구에 적합합니다.

Layout & Spacing

4px 그리드를 기준으로 간격을 맞춰요. 모바일 화면은 가로 375px 기준으로 설계하고, 화면 최상단엔 항상 내비게이션을 둬요.

Spacing scale

4의 배수로 간격을 통일하면 화면이 정돈돼 보여요. 컴포넌트 사이 간격에 사용합니다.

Radius

컴포넌트는 부드러운 인상을 위해 둥근 모서리를 사용해요. (아이콘 내부 radius는 0–2px 별도 규칙)

Shadow · Elevation

토스처럼 부드럽고 옅은 그림자로 높이를 표현해요. 카드 → 팝오버 → 드롭다운 → 모달 순으로 단계가 올라갑니다.

sm · 카드

md · 팝오버·셀렉트

lg · 드롭다운·시트

xl · 모달·다이얼로그

Motion

전환은 빠르고 부드럽게. 기본 이징 cubic-bezier(.2,.8,.2,1), 길이 0.12~0.28s. 아래 트랙에 마우스를 올려보세요.

fast · 0.12s

base · 0.18s

slow · 0.28s

fast 0.12s — hover·작은 토글
base 0.18s — 대부분의 전환(기본값)
slow 0.28s — 시트·모달처럼 큰 이동
과한 bounce·긴 애니메이션은 피하고, 1초 넘는 동작엔 로딩 표시를 써요.

Breakpoints

모바일 우선. 기준 폭 375px에서 설계하고 위로 확장해요.

구간	폭	기준
Mobile	≤ 599px	기준 375px · 1열
Tablet	600–1023px	2열 · 사이드 보조
Desktop	≥ 1024px	다열 · 고정 사이드

※ 이 가이드도 900px 이하에서 사이드바를 접어요.

Scrollbar

AI Hub와 동일한 스타일이에요 — 둥근 캡슐형, 트랙에서 살짝 떠 있는 얇은 알약. 위/아래 화살표 버튼은 숨겨요. 아래 박스를 스크롤해 보세요.

스크롤 영역 예시예요. 안쪽 내용이 길어지면 둥근 캡슐형 스크롤바가 나타나요.

thumb는 hover하면 살짝 진해지고, padding-box 트릭으로 트랙에서 떠 있는 얇은 알약처럼 보여요.

라이트는 rgba(0,0,0,.22), 다크는 rgba(255,255,255,.2) 기준.

최소 길이 44px로 항상 둥글게 유지돼요.

위/아래 화살표 버튼은 제거했어요.

한 줄 더 · 한 줄 더 · 마지막 줄.

::-webkit-scrollbar 의사요소 기준 — Chromium/Electron에서 둥근 모양이 적용돼요.

Iconography

작은 공간에서 정보를 빠르고 직관적으로 전달하는 시각 언어예요. 사용자가 기능과 행동을 쉽게 인식하도록 단순한 형태와 일관된 규칙으로 제작합니다.

아이콘 셋 · 자주 쓰는 UI 아이콘 100+

Icon Name · 이름 규칙

명확한 기능이 없으면 형태를 기준으로 이름을 지정해요. (예: chevron-down)
명확한 기능이 있으면 기능명을 사용해요. (예: search, share)
두 단어 이상 결합되거나 방향 속성이 들어가면 카멜케이스(CamelCase)로 작성해요.

Grid & Size

24×24px 그리드 기준으로 작업하고, 사방 2px 여백을 둬요(시각 보정 시 조정 가능). 기본 크기는 24×24(L).

Token	Size	미리보기

Stroke

Bold · 1.8px

Normal · 1.3px

Bold 기본 두께 1.8px, Normal 기본 두께 1.3px.
시각 보정이 필요하면 더 얇은 두께를 쓸 수 있어요.
스트로크의 끝과 꺾임은 둥글게(round) 설정하는 것을 권장해요.

Corner Radius & Theme

Radius는 0–2px 범위에서 사용해요. 작은 요소엔 작은 반경, 큰 요소엔 상대적으로 큰 반경.
Corner smoothing을 적용해 부드러운 인상을 유지해요.
아이콘은 기본적으로 라인 스타일로 제작하고, 주목도·인터랙션이 필요할 때만 Fill 스타일을 써요.

Padding · 터치/호버 영역

모바일·태블릿: 터치 영역을 위해 아이콘 기준 2배 크기의 여백을 확보해요. (24px 아이콘 → 48px 영역)
PC: 호버 영역을 위해 사방 8px 여백을 둬요.

Button

가장 중요한 행동에만 Primary를 써요. 한 화면에 Primary 버튼은 하나로 제한합니다.

Variant

Size · Large / Medium / Small

Bottom CTA · 전체 너비

Text Field

라벨은 항상 입력칸 위에 둬요. 에러는 status-negative로 표시하고, 무엇을 고쳐야 하는지 함께 알려줘요.

이름

실명으로 입력해 주세요

이메일

이메일 형식이 올바르지 않아요

사번 · 비활성

List Row

아이콘 + 제목 + 보조 설명 + 트레일링(화살표·토글·뱃지). 목록·설정·메뉴의 기본 단위예요.

이미지 생성

GPT Image · Nano Banana

일정 동기화

마지막 동기화 3분 전

권한 관리

관리자만 변경할 수 있어요

관리자

Badge · Tab · Toggle

상태 표시와 화면 전환에 쓰는 작은 컴포넌트예요. 탭과 토글은 클릭해 동작을 확인할 수 있어요.

Badge

NEW 완료 실패 대기

Tab

Segmented

Toggle

Calendar

날짜 선택용 캘린더예요. 선택일은 브랜드 블루 원형, 오늘은 링으로 표시하고, 일요일은 빨강·토요일은 파랑으로 구분합니다(토스 스타일). 날짜·화살표를 눌러보세요.

2026년 6월

일월화수목금토

Overlay · Modal · Sheet · Toast

화면 위에 띄우는 레이어예요. 딤 배경 + xl 그림자로 깊이를 주고, 모달 왼쪽 버튼은 항상 닫기. 버튼을 눌러 동작을 확인하세요.

모달 = 중요한 확인·입력 · 바텀시트 = 모바일 선택·액션 · 토스트 = 짧은 피드백(자동으로 사라짐)

Empty State

데이터가 없을 때의 첫 화면이에요. 아이콘 + 한 줄 설명 + 다음 행동(Primary)으로 막막함을 줄여요. 문구는 해요체.

아직 만든 작업이 없어요

첫 작업을 만들면 여기에 모여요.

Loading · Skeleton

데이터를 기다릴 때. 짧으면 스피너, 레이아웃이 있으면 스켈레톤으로 "곧 나온다"는 신호를 줘요.

Spinner

Progress

Skeleton

Form

입력 화면 패턴이에요. 라벨은 위, 필수는 *, 에러는 status-negative + 무엇을 고칠지 안내. 셀렉트·체크·라디오는 브랜드 블루로 강조.

이름 *

실명으로 입력해 주세요

분류

Checkbox

즐겨찾기에 추가 알림 받기

Radio

공개 팀에게만 비공개

Table · Data List

표 데이터예요. 헤더 클릭으로 정렬, 행 hover 강조, 하단에 개수 + 페이지네이션. 숫자는 우측 정렬을 권장해요.

이름 ▾	분류 ▾	상태	사용 ▾
ChatGPT	대화형 AI	활성	128
Midjourney	이미지 생성	활성	96
Runway	영상 생성	대기	41
Suno	음악 / 오디오	중단	12

전체 24개

Alert · Banner

화면 안에서 상태를 알리는 배너예요. 정보·성공·주의·오류 4종. 토스트(자동 사라짐)와 달리 사용자가 닫기 전까지 남아요.

안내 · 새 버전이 적용됐어요.

완료 · 저장했어요.

주의 · 동기화되지 않은 변경이 있어요.

오류 · 파일을 불러오지 못했어요. 다시 시도해 주세요.

Tag · Chip

선택·필터·입력 토큰을 표시해요. 삭제 가능한 입력형 칩은 ✕로 제거(눌러보세요). 강조는 브랜드 톤.

ChatGPT Claude Gemini 이미지 생성

Avatar

사용자·팀 표시. 이미지가 없으면 이니셜. 크기 sm/기본/lg, 여러 명은 겹쳐서(stack) 보여줘요.

Stepper

여러 단계 작업의 진행을 보여줘요. 완료 = 채운 원, 현재 = 링 강조, 이후 = 회색.

✓정보 입력

2옵션 선택

3완료

Slider · Quantity

연속값은 슬라이더(볼륨처럼 채워지는 바), 정수 수량은 −/+ 스테퍼로 조절해요. 채움·포인트는 브랜드 블루. 직접 움직여 보세요.

Slider (Range)

Quantity (수량)

Logo & App Title

로고 마크와 앱 타이틀을 함께 노출하는 기본 양식이에요. GNB 좌측 상단에 고정하고, 정해진 락업·간격·색을 지켜 브랜드 인지를 일관되게 유지합니다.

기본 락업 (Lockup)

로고 마크 + 앱 타이틀 가로 조합. 세로 중앙 정렬, 마크와 타이틀 간격 10px.

AI Hub

보호 영역(clear space) — 마크 높이의 50%

AI Hub

앱 아이콘 · 파비콘

W-ISLAND 브랜드 로고예요. 이 사이트 탭 아이콘으로 사용 중이고, favicon.ico + PNG(16·32·180·512)로 제공돼요.

규칙

보호 영역: 마크 높이의 50% 여백을 사방에 확보해요(다른 요소가 침범 금지).
최소 크기: 마크 24px(PC)·20px(모바일), 타이틀 18px 이상.
타이포: 타이틀은 Title 2(22/700)~Heading(18/600), 색은 txt-primary.
색: 마크는 브랜드 블루(blue-500), 단색 배경에선 마크 단독 사용도 가능해요.

Do / Don't

정해진 락업·간격·색 유지 · 배경 대비 충분히 확보

Don't

회전·늘이기·그림자·그라데이션 변형 · 간격 임의 변경 · 저대비 배경 위 노출

Navigation · GNB / LNB

전역 이동은 GNB(상단 바), 영역 내 이동은 LNB(좌측 카테고리)로 나눠요. 깊이는 2단계 이내로 얕게 유지하고, 현재 위치는 브랜드 블루로 표시합니다.

GNB · Global Navigation Bar

최상단 전역 바. 좌측 = 로고+타이틀, 우측 = 전역 액션(검색·추가·설정 등). 화면 전환과 무관하게 항상 고정 노출.

AI Hub

툴 검색하기

LNB · Local Navigation Bar

좌측 지역 내비. 카테고리·메뉴 이동. 항목을 눌러보세요 — 현재 위치가 브랜드 블루로 강조돼요.

바로가기

즐겨찾기

최근 사용

카테고리

대화형 AI

이미지 생성

영상 생성

음악 / 오디오

디자인 툴

카테고리 정렬 원칙

1자주 쓰는 것 먼저

즐겨찾기·최근 사용처럼 사용 빈도가 높은 항목을 최상단에 둬요.

2핵심 → 부가 순서

주 기능을 위로, 설정·도움말처럼 부가 기능은 맨 끝(또는 GNB 우측 끝)에 배치해요.

3같은 성격끼리 그룹

비슷한 메뉴를 묶고 그룹 사이는 여백·구분선으로 끊어 인지 부담을 줄여요.

4깊이는 2단계 이내

GNB > 카테고리 > 항목. 더 깊어지면 사용자가 길을 잃어요.

5현재 위치는 브랜드 블루

활성 항목을 강조해요(LNB 채움 / 탭 밑줄). 한 화면에 활성은 하나만.

내비게이션 구조 (IA) — AI Hub 예시

GNB  로고(AI Hub) · 검색 · 툴 추가 · 편집 · 노트 · 채팅 · 설정
│
└─ LNB · 카테고리
   ├─ 즐겨찾기 / 최근   ← 사용 빈도 높음 · 최상단
   ├─ 대화형 AI
   ├─ 이미지 생성
   ├─ 영상 생성
   ├─ 음악 / 오디오
   ├─ 디자인 툴
   └─ 오피스 …

UX 라이팅

제품 안의 모든 글자는 이 6가지 원칙을 따라요. 사내 전 직군(디자이너·MD·CS·물류·경영·회계·지원팀)이 한 번에 이해할 수 있는 말이 기준입니다.

1해요체로 통일해요

모든 문구는 해요체. “저장됨”, “저장하시겠습니까?” → “저장했어요”

2쉬운 말로 써요

직군이 달라도 누구나 이해하도록 영어·약어·전문용어를 풀어 써요.

이렇게 ✗	이렇게 ✓
업로드 컴플리트	올리기 완료했어요
싱크	동기화했어요
Confirm	확인

3능동적으로 말해요

Before

확인되었어요 / 등록되었습니다

After

확인했어요 / 등록했어요

4긍정적으로 말해요

Before

권한이 없어요

After

관리자에게 요청하면 쓸 수 있어요

다이얼로그 왼쪽 버튼은 항상 [닫기] — “취소”는 작업이 취소된다는 오해를 줄 수 있어요.

5캐주얼한 경어를 써요

이렇게 ✗	이렇게 ✓
입력하시겠어요?	입력할래요?
~께 전달	~에게 전달
확인 부탁드립니다	확인해 주세요

6명사를 동사로 풀어요

Before

파일 업로드 진행

After

파일을 올리고 있어요

UX 원칙 · 답답하지 않은 화면

사용자를 속이거나 가두지 않는 최소한의 기준이에요. 사내 도구에서도 그대로 지킵니다.

1진입 직후 화면을 가로막지 않기

들어오자마자 팝업·바텀시트로 전면을 막지 않아요. 집중이 끊기고 이탈로 이어져요.

2뒤로가기를 막지 않기

뒤로가기 버튼을 눌렀을 때 팝업으로 이전 화면 이동을 막지 않아요.

3거절할 수 있게 하기

한쪽 선택지만 주는 강제 구조를 만들지 않아요. 닫기/거절 경로를 항상 둬요.

4예상 밖의 노출 없애기

흐름 중 갑작스러운 전면 광고·팝업으로 몰입을 방해하지 않아요.

5버튼 라벨을 명확하게

버튼만 보고도 다음에 무슨 일이 일어날지 알 수 있게 써요. 모호한 라벨은 망설임을 키워요.

Do / Don't

자주 틀리는 지점만 모았어요. 왼쪽이 권장(Do), 오른쪽이 지양(Don't).

✓ DO

한 화면에 Primary는 하나 — 우선순위가 분명해요.

✕ DON'T

Primary 남발 — 뭐가 중요한지 사라져요.

✓ DO

버튼은 Deep Azure(#1577cc) — 흰 글씨 대비 4.4:1.

✕ DON'T

밝은 로고색 버튼 — 흰 글씨가 흐려요(2.7:1).

✓ DO

저장했어요

해요체 · 능동 · 긍정.

✕ DON'T

저장되었습니다

수동형 · 문어체 — 톤과 안 맞아요.

팀 설치 · 배포 (Claude Code)

이 디자인 시스템을 Claude Code 플러그인으로 설치하면, 평소처럼 말하기만 해도 Claude가 이 가이드대로 작업해요. 레포를 clone할 필요 없고, 본인의 모든 프로젝트에 적용됩니다.

▶ 30초 따라하기 (실제 흐름)

팀원에게 이 데모를 보여주면 돼요. 재생을 누르면 입력이 실제처럼 재현되고, 오른쪽 실시간 미리보기가 적용 순간 회색 → 브랜드 톤으로 바뀌어요. 아래 버튼으로 명령도 바로 복사할 수 있어요.

Claude Code — w-island

실시간 미리보기● REC

샘플 도구

NEW완료

파일을 불러왔습니다

1. 설치 — 한 번만

⚠️ OS 터미널(cmd·PowerShell)이 아니에요. 아래 /명령은 Claude Code 대화 입력창(평소 Claude에게 말 거는 그 칸)에 입력해요. VS Code 확장 · 데스크탑 앱 · 터미널 CLI 모두 같은 방식이에요.

# Claude Code 입력창에 한 줄씩 입력
/plugin marketplace add w-island/style-guide
/plugin install wisland-design-system@w-island
# 바로 활성화 (세션 새로 시작 대신)
/reload-plugins

메뉴(GUI)로 설치 — 명령 외우기 싫을 때

입력창에 /plugin 입력 → 탭 메뉴가 떠요 (Tab 키로 탭 이동, 방향키+Enter로 선택).
Marketplaces 탭 → "마켓플레이스 추가" → w-island/style-guide 입력
Discover 탭 → wisland-design-system 선택 → 스코프 고르고 설치 (기본 User = 내 모든 프로젝트)
Installed 탭에서 enabled 확인. 안 켜지면 /reload-plugins

2. 사용 — 그냥 말하면 돼요

스킬 이름을 외울 필요 없어요. UI/디자인 작업을 부탁하면 Claude가 알아서 이 디자인 시스템을 적용해요.

"버튼 하나 추가해줘" "색 우리 톤으로 바꿔줘" "다크모드 입혀줘" "안내 문구 다듬어줘"

※ 단순한 한 줄 질문엔 안 뜰 수 있고, 실제 UI 작업일 때 발동돼요.

3. 진행 중인 작업에 전체 적용 (강하게)

"적용해줘"가 약하게 먹힐 때 — 슬래시 커맨드로 디자인 시스템을 현재 작업에 전면 적용해요. 토큰·컴포넌트·문구·다크모드까지 한 번에 훑어서 맞춰줍니다.

# 진행 중인 작업/프로젝트 전체에 적용 (범위 인자 옵션)
/wisland-design-system:apply 전체
# 또는 스킬을 직접 강제 호출
/wisland-design-system:wisland-design-system

잘 안 먹힐 때 체크리스트

설치·활성 확인: /plugin 목록에 wisland-design-system이 enabled인지 확인. 막 설치했다면 세션을 새로 시작해야 인식돼요(가장 흔한 원인).
프로젝트에 항상 강제하려면 그 프로젝트 CLAUDE.md에 한 줄 추가:
이 프로젝트의 모든 UI·문구는 wisland-design-system 디자인 시스템을 따른다.
그래도 약하면 위 /wisland-design-system:apply 커맨드를 쓰세요 — 자동 트리거와 달리 항상 전수 적용돼요.

설치가 안 될 때 — 링크로 바로 적용 (설치·등록 불필요)

플러그인 등록이 안 되는 환경(구버전·권한·웹 등)에서도 돼요. 공개 레포라, 아래 프롬프트를 Claude에 그대로 붙여넣으면 기준 문서를 읽어와 전체 적용해요.

아래 더블유아일랜드 디자인 시스템 기준을 읽고, 지금 작업/이 프로젝트에 전체 적용해줘.
- https://raw.githubusercontent.com/w-island/style-guide/main/plugins/wisland-design-system/skills/wisland-design-system/SKILL.md
- https://raw.githubusercontent.com/w-island/style-guide/main/plugins/wisland-design-system/skills/wisland-design-system/references/tokens.md
- https://raw.githubusercontent.com/w-island/style-guide/main/plugins/wisland-design-system/skills/wisland-design-system/references/components.md
- https://raw.githubusercontent.com/w-island/style-guide/main/plugins/wisland-design-system/skills/wisland-design-system/references/ux-writing.md
색·컴포넌트·문구·다크모드까지 이 기준대로 맞추고, 기존 토큰 시스템이 있으면 값만 리매핑해줘.

4. 업데이트

디자인 시스템이 바뀌면 최신으로 당겨오세요.

/plugin marketplace update w-island
/plugin update wisland-design-system@w-island

문의: creative@wisland.co.kr · 레포: github.com/w-island/style-guide

Color

Semantic Color

Typography

Layout & Spacing

Motion

Breakpoints

Scrollbar

Iconography

Button

Text Field

List Row

Badge · Tab · Toggle

Calendar

Overlay · Modal · Sheet · Toast

Empty State

아직 만든 작업이 없어요

Loading · Skeleton

Form

Table · Data List

Alert · Banner

Tooltip

Tag · Chip

Avatar

Stepper

Slider · Quantity

Logo & App Title

Navigation · GNB / LNB

1자주 쓰는 것 먼저

2핵심 → 부가 순서

3같은 성격끼리 그룹

4깊이는 2단계 이내

5현재 위치는 브랜드 블루

UX 라이팅

1해요체로 통일해요

2쉬운 말로 써요

3능동적으로 말해요

4긍정적으로 말해요

5캐주얼한 경어를 써요

6명사를 동사로 풀어요

UX 원칙 · 답답하지 않은 화면

1진입 직후 화면을 가로막지 않기

2뒤로가기를 막지 않기

3거절할 수 있게 하기

4예상 밖의 노출 없애기

5버튼 라벨을 명확하게

접근성 (A11y)

1명도 대비 확보

2포커스 링 항상 보이게

3터치 영역 최소 44×44

4색만으로 전달하지 않기

5키보드로 모든 동작

Do / Don't

팀 설치 · 배포 (Claude Code)