맞는 문서가 없습니다. 다른 단어로 찾아보세요.
DESIGN SYSTEM · MERGED BOARD v0.2 DRAFT
두 제안을 합친 색·컴포넌트·화면을 한 장에서 비교하고, 주 버튼 색을 바꿔 봅니다.
디자인 스타일 · 통합 시각 보드 (2026-09-06)
페이블과 쏠의 스타일 제안을 하나의 화면 언어로 합치면 어떻게 보이나?
누가 읽나: 민수 · 디자이너 · UI/UX 기획자
페이블의 스타일 가이드 v0.1과 쏠의 안심 조율 가이드 v0.1·시각 보드를 대조해 하나의 화면 언어로 합친 보드입니다. 겹치는 항목은 그대로 두고, 갈리는 항목은 아래 표에 근거와 함께 어느 쪽을 택했는지 적었습니다. 화면의 인원·금액·후보는 모두 가상 예시이며, 어떤 값도 아직 제품에 적용하지 않았습니다.
01 / SIDE BY SIDE
같은 곳이 훨씬 많습니다. 따뜻한 흰 바탕, Pretendard, 12·16·24 반경, 한 화면 한 판단, 선호와 절대 조건의 분리, AI 초안은 검토 전 상태로 표시, 가짜 퍼센트와 대리인 대화 금지. 아래는 갈린 항목과 통합안입니다. 페 페이블 값 채택 · 쏠 쏠 값 채택 · 합 둘을 합친 새 규칙
| # | 항목 | 페이블 v0.1 | 쏠 v0.1 | 통합안 (이 보드) |
|---|---|---|---|---|
| 1 | 콘셉트·모티프 | 봉인된 원탁 → 봉인 카드·교집합·원탁의 점 3모티프 | 「안심 조율」 — 서로 다른 조각이 제 모양대로 한 테이블에 모임 | 같은 콘셉트. 쏠의 조각 일러스트는 로고·히어로, 페이블 3모티프는 UI 아이콘·상태에 합 |
| 2 | 바탕·잉크·보조 | #FAF8F4 · #1A1714 · #6B6560 | #FAF9F6 · #262335 · #625E70 | 쏠 값. 공개 사이트(reading.css)와 이어지고 대비 14.5:1 쏠 |
| 3 | 보라(내 비공개) | #684DEB (흰 글자 5.45:1) | #5842D8 (흰 글자 6.59:1) | 쏠 값. 이미 공개 사이트·스튜디오 주색이고 대비도 높음 쏠 |
| 4 | 합의 색과 시점 | 청록. 합의안·지켜진 조건·제출 완료 전반 | 초록. 전원 명시 동의가 끝났을 때만 | 쏠 규칙 + 페이블 색: 청록 #0F766E는 전원 동의 확인 후에만, 그 전 결과 카드는 중립 합 |
| 5 | 재확인 중 표시 | (규정 없음) | 보라 배지 | 기다림(앰버) 배지. 보라는 「내 것」에 남기고, 기다리는 상태는 기다림 색으로 합 |
| 6 | 방장 확정 상태 | (규정 없음) | 중립색 + 「방장 확정 · 전원 동의 미확인」 명시 | 쏠 규칙 채택 쏠 |
| 7 | 반드시 지킬 조건 | 녹슨 주황 전용 역할 색, 2칸 선택 | 보라 테두리 카드 안에 상한 입력 | 페이블 색·2칸 선택. 후보를 제외하는 선택은 선호와 다른 색·크기여야(원칙 2) 페 |
| 8 | 오류 색 | (없음, 녹슨 주황 겸용) | #B43E46 입력 오류·실행 실패 | 쏠 값 추가. 시스템 오류와 「반드시 조건」을 한 색에 두지 않음 쏠 |
| 9 | 주 버튼 | 잉크 검정 (역할 규칙 순수) | 깊은 보라 (브랜드 연속) | 미결. 위 컨트롤 바로 전환 비교 미결 |
| 10 | 글자 단계 | 8단계 (34/28/20/18/16/14/12/56) | 5단계 (28/22/18/16/14) | 페이블 8단계 + 쏠 규칙(중요 안내를 각주로 밀지 않음, 12px는 배지·법적 안내 전용) 합 |
| 11 | 참가자 화면 폭 | 480 단일 열 | 최대 640 | 질문 480 · 결과·리포트 640 · 방장·비교 1120 합 |
| 12 | 터치 영역 | 44×44 | 48×48 (WCAG 최소 24보다 넉넉한 내부 기준) | 48. 넉넉한 쪽 쏠 |
| 13 | 아이콘 | 선 아이콘 1.5px, 이모지 금지 | 같은 굵기 24px 선 아이콘 + 문구 | 같음. 현재 목업 이모지는 전부 교체 합 |
| 14 | 주제별 색 | P2로 미룸 | 아이콘 타일에만 5색, 의미 색은 불변 | 쏠 채택. 타일 색은 expansion.css 값 그대로 쏠 |
| 15 | 진행 표시 | 조율 4단계 목록 + 원탁의 점 | 방 5단계(질문 준비→완료) | 둘 다. 5단계는 방 상태, 4단계는 계산 세부 합 |
| 16 | 재확인 3선택 | 세로 72, 의미 색 테두리 | 라디오 카드, 세 선택 같은 위계 | 같은 위계의 라디오 카드 + 왼쪽 4px 의미 색 합 |
| 17 | 버튼 동사 | 「봉인하기」(첫 답변) · 「보내기」 | 「내 조건 확인하기」 · 「이 조건으로 제출」 | 화면 버튼은 쏠처럼 결과를 설명하는 동사. 「봉인」은 홈 3단계 브랜드 카피에만 합 |
| 18 | 비공개 문구 | 「이 답은 방장을 포함해 아무에게도 보이지 않아요」 | 「다른 참가자와 방장에게 공개되지 않아요」 + 권한 검증 전 보장 문구 금지 | 쏠 문구·규칙. 시스템 처리 범위는 별도 문장으로 쏠 |
02 / COLOR
바탕·잉크·보조·테두리·보라는 이미 공개 사이트와 질문 스튜디오가 쓰는 쏠의 값을 그대로 잇습니다. 합의·반드시·기다림·안내는 페이블의 역할 색을, 오류는 쏠의 붉은색을 씁니다. 청록은 전원 동의가 확인된 뒤에만 나타나고, 그 전의 추천 결과는 중립색입니다.
#FAF9F6#262335#625E70#DCD7E5 · #8C859B#5842D8 · 연한 #F0EDFF#0F766E · 글자 #0B5C56 · 연한 #E3F3F0#B93815 · 글자 #9A2E10 · 연한 #FCEDE7글자 #7A4F00 · 연한 #FFF3D6글자 #1D4ED8 · 연한 #E6F0FF글자 #B43E46 · 연한 #FFF0F0#F1EEF6#FFFFFF규칙: 한 화면에 역할 색은 최대 2가지. 보라(내 것)와 청록(우리 것)이 같이 있는 결과 화면은 정상. 녹슨 주황이 더해지면 그 화면의 주제는 「제외·후보 없음」이다. 주제별 색(§6)은 아이콘 타일에만 쓰고 의미 색을 바꾸지 않는다.
WCAG 2.2 AA 기준 본문 4.5:1, 큰 글자·UI 경계 3:1. 두 제안이 각자 계산한 값과 일치하는지도 함께 확인했다(페이블 §3-4, 쏠 CONTRAST.json). 이 표는 지정 조합의 계산값이며 제품 전체 접근성 검증이 아니다.
| 조합 | 미리보기 | 전경 / 배경 | 대비 | 판정 | 값 출처 |
|---|---|---|---|---|---|
| 본문 잉크 / 바탕 | 가나다 Aa | #262335 / #FAF9F6 | 14.51:1 | AA 통과 | 쏠 |
| 보조 글자 / 바탕 | 가나다 Aa | #625E70 / #FAF9F6 | 5.95:1 | AA 통과 | 쏠 |
| 보조 글자 / 흰 카드 | 가나다 Aa | #625E70 / #FFFFFF | 6.26:1 | AA 통과 | 쏠 |
| 흰 글자 / 검정 주 버튼 | 가나다 Aa | #FFFFFF / #262335 | 15.28:1 | AA 통과 | 통합 |
| 흰 글자 / 보라 주 버튼 | 가나다 Aa | #FFFFFF / #5842D8 | 6.59:1 | AA 통과 | 쏠 |
| 보라 글자 / 바탕 | 가나다 Aa | #5842D8 / #FAF9F6 | 6.26:1 | AA 통과 | 쏠 |
| 보라 글자 / 보라 연한 배경 | 가나다 Aa | #5842D8 / #F0EDFF | 5.73:1 | AA 통과 | 쏠 |
| 청록 / 바탕 | 가나다 Aa | #0F766E / #FAF9F6 | 5.20:1 | AA 통과 | 페이블 |
| 청록 글자 / 청록 연한 배경 | 가나다 Aa | #0B5C56 / #E3F3F0 | 6.85:1 | AA 통과 | 페이블 |
| 흰 글자 / 청록 | 가나다 Aa | #FFFFFF / #0F766E | 5.47:1 | AA 통과 | 페이블 |
| 녹슨 주황 / 바탕 | 가나다 Aa | #B93815 / #FAF9F6 | 5.48:1 | AA 통과 | 페이블 |
| 녹슨 주황 글자 / 연한 배경 | 가나다 Aa | #9A2E10 / #FCEDE7 | 6.64:1 | AA 통과 | 페이블 |
| 기다림 글자 / 연한 배경 | 가나다 Aa | #7A4F00 / #FFF3D6 | 6.46:1 | AA 통과 | 페이블 |
| 안내 글자 / 연한 배경 | 가나다 Aa | #1D4ED8 / #E6F0FF | 5.83:1 | AA 통과 | 페이블 |
| 오류 글자 / 연한 배경 | 가나다 Aa | #B43E46 / #FFF0F0 | 5.10:1 | AA 통과 | 쏠 |
| 오류 글자 / 바탕 | 가나다 Aa | #B43E46 / #FAF9F6 | 5.36:1 | AA 통과 | 쏠 |
| 입력 테두리 / 흰 카드 (UI 경계 3:1) | 가나다 Aa | #8C859B / #FFFFFF | 3.53:1 | UI 3:1 통과 | 쏠 |
| 장식 테두리 / 흰 카드 (경계 용도 금지) | 가나다 Aa | #DCD7E5 / #FFFFFF | 1.41:1 | 장식 전용 (기준 없음) | 쏠 |
| 현재 목업 보라 #7057ff / #fbfaf8 | 가나다 Aa | #7057ff / #fbfaf8 | 4.48:1 | 미달 | 교체 대상 |
| 현재 목업 주황 배지 #ff7657 / 흰색 | 가나다 Aa | #ff7657 / #FFFFFF | 2.63:1 | 미달 | 교체 대상 |
03 / CORE SCREENS
쏠 보드의 A·B·C 화면 구성과 문구를 유지하고, 색·배지·상한 카드·원탁의 점을 통합 규칙으로 바꿨습니다. 위 컨트롤 바에서 주 버튼 색과 결과 상태를 바꿔 비교할 수 있습니다.
교통과 숙박을 포함해 알려 주세요. 식비는 따로 확인할게요.
이보다 비싼 후보는 추천에서 제외돼요.
지금 후보 3개 중 1개가 제외돼요 (가상 계산값)
쏠 A 화면 + 페이블 §8-4 상한 카드. 상한 카드는 보라가 아니라 녹슨 주황이고, 제외되는 후보 수를 문장으로 바로 보여 준다. 비공개 문구는 권한·데이터 처리 검증 뒤에만 제품에 쓴다(쏠 §5).
1박 2일 · 기차와 도보
가상 후보 · 실제 가격·예약 가능 여부 미확인
쏠 B 화면 + 쏠 §3 상태 규칙 + 페이블 원탁의 점. 재확인 중은 기다림(앰버), 전원 동의 완료만 청록, 방장 확정·전원 동의 미확인은 중립. 점의 위치는 순서를 드러내지 않도록 무작위 고정(페이블 §8-6).
충돌한 조건 범주: 예산 · 이동 (2가지)
누구의 어떤 조건인지는 표시하지 않아요.
각자의 조건은 그대로 두고, 다른 지역이나 일정을 더 찾아볼 수 있어요.
내 조건이 잘못 이해되었는지 확인하거나, 가능한 범위를 직접 바꿀 수 있어요.
쏠 C 화면 문구 + 페이블 §9 합의 불가 규칙. 「실패」라는 말을 쓰지 않고, 충돌한 조건의 범주 수만 보여 준다. 상한 완화를 강요하지 않는다.
04 / COMPONENTS
페이블 §8-3 · 모든 조건 질문의 기본 응답 형식. 아이콘·글자·색 세 가지로 동시에 구분한다.
「어려워요」는 후보를 제외하므로 녹슨 주황. 쏠 §6의 「선택 카드: 색 외에 선택 표시와 문구를 함께」 규칙과 같다.
페이블 §8-4 · 체크박스 대체. 쏠 §6 「작은 토글 하나에 의미를 숨기지 않음」과 같은 원칙.
선택한 5만 원은…
지금 후보 6개 중 2개가 제외돼요 (엔진 계산값, 불가 시 문장 생략)
쏠 §6 「세 선택의 위계를 비슷하게, 거절을 찾기 어렵게 만들지 않음」 + 페이블 §8-9 의미 색 테두리.
집계는 「동의 3 · 조건부 1 · 재조율 0」처럼 수만 표시. 무응답은 동의로 합산하지 않는다(쏠 §10).
쏠 §6 진행 상태(방 수명 주기) 안에 페이블 §8-6 조율 4단계(계산 중 세부)를 넣는다.
스피너·가짜 퍼센트·대리인 대화 없음. 30초 초과 시 기다림 배너로 규칙 기반 결과 전환을 알린다.
쏠 §6·§8 · 생성된 질문을 확정본처럼 보이지 않게. 페이블 §8-8의 「맞아요 / 수정할게요」 확인 패턴과 같은 계열.
참여하기 어려운 음식이나
식단 조건이 있나요?
추천 이유: 모두가 먹을 수 있는 메뉴인지 확인하려고 추가했어요. 진단명이나 사유는 묻지 않아요.
페이블 §8-1·§8-5 + 쏠 §3 상태 구분. 배지는 높이 24, 아이콘 12px 동반.
주 버튼 색은 컨트롤 바에서 바꿔 볼 수 있다. 비활성 버튼은 흐리게만 하지 않고 이유를 글로 쓴다. 터치 영역 48×48 이상(쏠 §5, 페이블 44보다 넉넉한 쪽 채택).
05 / TYPE · SPACE · SHAPE
두 제안 모두 Pretendard, 본문 16, 보조 14, 반경 12·16·24를 골랐습니다. 단계 표는 페이블 §4를, 「중요한 안내를 작은 각주로 밀지 않는다」와 「12px는 배지·법적 안내 전용」은 쏠 §4를 규칙으로 더했습니다. 이 보드는 외부 글꼴을 내려받지 않으므로 기기에 Pretendard가 없으면 시스템 글꼴로 보입니다.
12 칩·배지 안쪽·명단 행 / 16 선택지·입력·버튼·정보 카드 / 24 결론 카드·초대 카드·바텀 시트 / 999 배지
폭: 질문 화면 480 단일 열(페) · 결과·리포트 640(쏠) · 방장·비교 1120(둘 다). 모션 150 / 240 / 1200ms 1회, 부유·반복 애니메이션 금지, reduced-motion에서 fade만.
06 / FIVE MOMENTS
쏠 §9 채택. 주제색은 아이콘 타일에만 쓰고 선택·반드시·완료의 의미를 바꾸지 않는다. 타일 색은 이미 공개 사이트 「다섯 가지 결정」 카드가 쓰는 값(expansion.css)을 그대로 가져와 새 색을 만들지 않았다. 이모지 대신 같은 굵기의 선 아이콘(페이블 §7-1).
목적과 활동 강도
일정·숙박·이동
기간과 예산
이동 방식·숙박
식단과 메뉴
술자리·종료 시간
가능 시간과 장소
참여 방식·이동
분담 상한과 취향
전달 방식·기한
07 / OPEN · SOURCES
검정 #262335: 「보라=내 비공개, 청록=우리 합의」 역할 규칙이 순수하게 남는다. 대비 14.5:1. 페이블 v0.1 권고.
보라 #5842D8: 공개 사이트·질문 스튜디오의 주 버튼이 이미 이 색이라 바꿀 것이 적고, 쏠 v0.1 권고. 대비 6.6:1. 대신 「보라=끼리 브랜드」로 규칙을 넓혀 적는다.
둘 다 AA를 넘고 제품 규칙에 모순은 없다. 위 컨트롤 바에서 전환해 보고 정해 주시면 가이드 두 벌을 한 문서(v0.2)로 합쳐 고정한다. 그 외 갈린 항목은 위 표대로 이 보드에서 정했고, 이의가 있으면 표의 행 번호로 말해 주면 된다.
보관 기간 문구(내 리포트 「30일 뒤 삭제」)는 요구사항·정책 §7 미결과 같은 항목이라 여기서 다시 묻지 않는다.