SIPE 5기 해커톤에 참여했다. 팀에서 디자인을 맡게 됐는데, 단순히 화면을 예쁘게 그리는 것에서 끝나지 않았다. 팀원들이 각자 다른 파트를 개발하는 상황에서, 어떻게 하면 디자인이 흐트러지지 않을지를 고민했고, 그걸 개발적인 방식으로 풀어내야 했다. 그 과정을 정리해본다.
팀 빌딩
스파크 세션에서 총 24개의 아이디어가 나왔다. 그중 허리 피라우 서비스가 유독 눈에 들어왔다. 평소 개발할 때 자세가 영 좋지 않았던 나한테 딱 필요한 서비스였다. 바로 투표를 했고, 그렇게 척추척척추 팀에 합류하게 됐다.
(당시 스파크 세션 현장은 여기에서 볼 수 있다.)
디자인 시스템 적용 문제
해커톤 일정은 촉박했고, 팀원들은 각자 기능 개발을 빠르게 진행해야 했다. 그 속도에 맞춰 화면을 하나하나 디자인해줄 여유가 없었다. 그렇다고 팀원들에게 UI를 자유롭게 맡기면? 컬러나 폰트크기가 제각각으로 같은 앱 처럼 보이지 않을 게 뻔했다.
역할 분담은 이렇게 했다.
- 윤홍비 : 디자인, UI, 홍보물
- 박지훈 : 화면 피드백/애니메이션(디자인/캐릭터 기반으로 유저에게 바른자세/나쁜자세에 대한 피드백)
- 민경언 & 박진현 : 사용자 여정, 측정 시나리오(앱이 자동으로 실행되고 난 후의 동작들)
- 권용민 : 로그인, 소셜 관련 기능(최대한 간단한 로그인 구현, 다른 사용자와 자세 지표를 수치화&비교)
- 강창우 : 데스크톱 앱 포팅, 기타 기능들 추가 개발
팀원 간 역할이 제각각이기 때문에, 각자 다른 화면을 각자의 방식으로 만들고 있는 상황이었다.
동시에 또 다른 고민이 있었다. 디자인 가이드를 CLAUDE.md에 통째로 넣어두면, UI와 전혀 상관없는 작업을 할 때도 매번 그 내용을 불러오게 되어 컨텍스트가 낭비된다. 필요할 때만 디자인 시스템이 작동하게 만들 수는 없을까?
디자인 시스템을 통일 가능한 스킬 구축 방법
다음으로 피그마에서 척척이 캐릭터를 머리, 몸통, 팔, 다리 등으로 그룹화해 세분화한 뒤, 리깅 작업은 Claude에게 맡겼다. 그리고 Claude Design을 활용해 컬러, 타이포그래피, 간격, 라운드 같은 디자인 토큰을 추출했다. 추출한 토큰은 Handshake로 export해서 프로젝트 루트의 design-system 폴더에 넣었고, 같은 폴더 안에 디자인 규칙을 정리한 DESIGN.md를 만들어 디자인 시스템의 단일 참조 문서로 삼았다.
design-system 폴더와 DESIGN.md를 참조하고, Claude의 frontend-design 스킬을 조합해 UI 구현 시 디자인을 보조하는 커스텀 스킬(design-driven-ui)을 만들었다. 스킬 frontmatter에 UI 작업 시에만 호출되도록 트리거 조건을 걸어, 디자인과 무관한 작업에서는 불필요하게 컨텍스트를 소모하지 않도록 했다.
팀 내에서 각자 claude나 codex 등 서로 사용하는 코딩 에이전트가 달랐지 때문에 ".codex나 .claude에 이 스킬만 넣어주세요" 라고 고지했다. 디자인 시스템을 따로 공부하지 않아도, Claude Code가 알아서 디자인 시스템에 맞는 화면을 만들어주는 구조였다.
실제로 박지훈님이 화면 피드백 애니메이션을, 권용민님이 소셜 로그인 화면을, 박진현님이 측정 시나리오 관련 UI를 작업하면서 각자 이 스킬을 활용했다. 서로 다른 파트를 따로 작업하고 있었는데도, 화면이 같은 톤으로 유지됐다.
허리피라우 5th SIPETHON 대상 수상
팀원들이 각자 기능을 개발하면서도 화면 톤이 흐트러지지 않았다. 컬러, 폰트, 간격 모두 일관됐다. 짧은 시간 안에 디자인 산출물을 빠르게 확장할 수 있었던 건 이 구조 덕분이었다.
발표 당일에는 미니 배너와 스티커까지 직접 제작해 데모 부스를 꾸렸다. 해골 캐릭터 척척이가 프린트된 스티커를 보고 다들 웃어줬던 게 기억에 남는다.
척추척척추 팀은 5th SIPETHON 대상을 수상했다. 디자인이 한몫했다는 게 뿌듯하다. 처음에는 화면을 예쁘게 그리는 게 내 역할이라고 생각했는데, 돌이켜보면 팀 전체가 일관된 디자인으로 작업할 수 있는 환경을 만든 경험이 추후에 도움이 될 것 같다.