7onic 7onic

Tailwind v4 올리면 끝일 줄 알았는데Tailwind CSS v4 나오고 나서 관련 글을 꽤 많이 봤다.대부분 비슷했다.새 문법은 이렇다config는 이렇게 바뀌었다@theme는 이렇게 쓴다v3에서 v4는 이렇게 옮기면 된다틀린 말은 아니다. 오히려 잘 정리돼 있었다.근데 막상 실제 프로젝트에 넣고 돌리기 시작하면 궁금한 건 다른 쪽이었다.뭐가 조용히 깨지나빌드는 되는데 왜 화면은 안 바뀌나다크모드는 진짜 괜찮나기존 컴포넌트는 그대로 돌아가나에러 없이 안 되는 건 뭔가나는 7onic이라는 디자인 시스템을 운영하고 있다.Tailwind v3 사용자도 있고, v4 사용자도 있다.즉 내 입장에서는 그냥 개인 프로젝트 하나 올리는 문제가 아니었다.같은 JSON 토큰 소스를 유지해야 하고같은 컴포넌트가 두..

혼자 디자인 시스템 만들면 어떤 일이 생길까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년 동안.디자이너이면서 프론트엔드..