7onic 7onic

혼자 디자인 시스템 만들면 어떤 일이 생길까7onic을 만들기 전에 이런 검색을 해봤다.> solo design system뭔가 현실적인 경험담이 나올 줄 알았다.하지만 실제로 나온 건 대부분 이런 콘텐츠였다.- 수십 명 규모 팀의 디자인 시스템 운영 사례- 컴포넌트 라이브러리 확장 전략- 조직 문화와 협업 프로세스 이야기- “토큰 담당자”, “플랫폼 팀”, “리뷰 체계”를 전제로 한 글들즉, 동료가 있다는 전제의 이야기들 이었다.나는 그런 팀이 없었다.혼자였다.그래서 혼자 디자인 시스템을 만든다는 게 실제로 어떤 일인지, 직접 겪으면서 배울 수밖에 없었다.지금 되돌아보니, 시작 전에 누가 알려줬다면 좋았을 것들이 있다. 매일 모든 결정을 혼자 내려야 한다팀에서는 결정이 분산된다.- 누군가는 토큰을 담..

7onic 디자인 시스템은 JSON 파일 하나로 돌아간다7onic 디자인 시스템 전체를 움직이는 핵심은 JSON 파일 하나다.줄 수는 1,847줄.색상은 #6B21A8 같은 hex 값으로 들어 있고, spacing은 16 같은 숫자로 저장된다. border radius도 같은 방식이다. 애니메이션은 keyframe 객체 형태로 정의되어 있다.Figma Token Studio에서 토큰을 export 해본 사람이라면 익숙하게 느껴질 것이다.왜냐하면 정말 그 파일이 맞기 때문이다.파일 이름은:figma-tokens.json 그리고 이 파일은 코드베이스 안에서 디자인 값이 직접 존재할 수 있는 유일한 장소다.나머지는 전부 자동 생성된다.명령어 한 번 실행하면 이 파일을 읽고, 약 2초 만에 배포용 파일 11개를..

내가 핸드오프를 포기한 순간디자인 핸드오프를 완전히 믿지 않게 된 순간을 아직도 정확히 기억한다.내가 디자인한 카드 컴포넌트를 개발자가 구현해둔 화면을 확인했을 때였다.spacing은 2px 정도 어긋나 있었고, border radius는 6px이어야 했는데 8px로 들어가 있었다. 그림자도 비슷하긴 했지만 어딘가 달랐다. 아마 Tailwind 기본 shadow 값을 가져다 쓴 것 같았다.하나하나 따지면 이슈 티켓을 만들 정도는 아니었다.그런데 전부 합쳐 놓고 보면 결과물이 묘하게 이상했다.딱히 틀린 건 아닌데, 정확하지 않았다.나는 Figma에 코멘트를 남겼고, 다음 스프린트에서 수정되었다.그리고 같은 일이 다음 컴포넌트에서도 반복됐다.그 다음 컴포넌트에서도.그렇게 10년 동안.디자이너이면서 프론트엔드..