플러스프로젝트 배경
1) 문제점 개발자만으로 구성된 팀이 디자이너 없이 서비스를 여기까지 만들어 온 상태였습니다. 발주사가 직접 밝힌 피드백은 "기능은 다 되는데 화면이 정적이고 웹 문서 같다", "색상과 요소 간 간격이 정돈되지 않았다"였습니다. 그런데 이 팀은 Figma 파일을 AI 도구로 읽어 코드로 옮기는 방식으로 개발합니다. 그래서 시안이 예쁜지보다 파일이 어떤 구조로 만들어졌는지가 결과물 품질을 그대로 좌우합니다.
프로젝트 성과
토큰 하나 교체로 5화면 동시 재계산
모드를 바꿀 때 실제로 바뀌는 것은 html 속성 두 개뿐입니다. 마크업과 클래스명은 그대로 두고 semantic 층 변수만 다시 계산됩니다.
컴포넌트 중첩 2단계 · L1 13종 / L2 8종
L2가 L2를 담은 곳이 0건입니다. 인벤토리 표도 손으로 쓴 것이 아니라 검사 스크립트가 소스를 훑어 만든 출력입니다.
명도 대비 30조합 전부 기준 통과
두 컬러웨이 × 15조합을 스크립트가 계산합니다. 최저가 4.86:1로 본문 기준 4.5:1을 넘었고 상태색은 면과 글자를 짝으로 갈랐습니다.
고밀도 표 행 높이 39px → 32px
개최자 화면은 목록·상세와 같은 토큰을 쓰면서 밀도만 다릅니다. 같은 자리에 보이는 행이 12행에서 16행으로 늘었습니다.
하드코딩된 색·여백 0건 · 화면 5종 배포
Tailwind 기본 팔레트를 통째로 제거해 토큰을 거치지 않은 색은 컴파일되지 않습니다. 31개 파일 검사에서 위반 0건입니다.
핵심 기능
Variables 모드 전환 — 색 축
상단 바에서 컬러웨이를 바꾸면 지면, 액센트, 글자, 앨범 아트까지 전 화면이 다시 그려집니다. 선택은 저장돼 새로고침해도 유지됩니다.
진행 단계
토큰 레이어와 컴포넌트 규격
2026.09.
3계층 토큰과 컬러웨이 2종, 밀도 2종을 정의하고 L1 13종, L2 8종 규격과 검사 스크립트 3종을 세웠습니다.
프로젝트 상세
1) 소개 K-POP 앨범 공동구매(분철) 중개 플랫폼의 화면 디자인을 개선하는 공고를 보고 만든 구현 데모입니다. 기능과 화면 구성은 그대로 두고 색상 체계, 여백 규칙, 글자 크기 체계, 기본 컴포넌트를 먼저 정의한 뒤 핵심 화면을 그 기준으로 다시 세우는 작업이었습니다. 시안 몇 장 대신 그 기준이 실제로 작동하는 상태를 만들었고, 결과물 URL에서 직접 눌러 보실 수 있습니다. 2) 작업 범위
