Previewlocked to source

SIPE 5기 해커톤에 참여했습니다. 팀에서 디자인을 맡게 됐는데 단순히 화면을 예쁘게 그리는 것에서 끝나지 않았습니다. 팀원들이 각자 다른 파트를 개발하는 상황에서 어떻게 하면 디자인이 흐트러지지 않을지를 고민했고 그걸 개발적인 방식으로 풀어내야 했습니다. 그 과정을 정리해봅니다.

팀 빌딩

스파크 세션에서 총 24개의 아이디어가 나왔습니다. 그중 허리 피라우 서비스가 유독 눈에 들어왔습니다. 평소 개발할 때 자세가 영 좋지 않았던 저한테 딱 필요한 서비스였습니다. 바로 투표를 했고 그렇게 척추척척추 팀에 합류하게 됐습니다.

(당시 스파크 세션 현장은 여기에서 볼 수 있습니다.)

디자인 시스템 적용 문제

해커톤 일정은 촉박했고 팀원들은 각자 기능 개발을 빠르게 진행해야 했습니다. 그 속도에 맞춰 화면을 하나하나 디자인해줄 여유가 없었습니다. 그렇다고 팀원들에게 UI를 자유롭게 맡기면? 컬러나 폰트크기가 제각각으로 같은 앱 처럼 보이지 않을 게 뻔했습니다.

역할 분담은 이렇게 했습니다.

  • 윤홍비 : 디자인, UI, 홍보물
  • 박지훈 : 화면 피드백/애니메이션(디자인/캐릭터 기반으로 유저에게 바른자세/나쁜자세에 대한 피드백)
  • 민경언 & 박진현 : 사용자 여정, 측정 시나리오(앱이 자동으로 실행되고 난 후의 동작들)
  • 권용민 : 로그인, 소셜 관련 기능(최대한 간단한 로그인 구현, 다른 사용자와 자세 지표를 수치화&비교)
  • 강창우 : 데스크톱 앱 포팅, 기타 기능들 추가 개발

팀원 간 역할이 제각각이기 때문에 각자 다른 화면을 각자의 방식으로 만들고 있는 상황이었습니다.

동시에 또 다른 고민이 있었습니다. 디자인 가이드를 CLAUDE.md에 통째로 넣어두면 UI와 전혀 상관없는 작업을 할 때도 매번 그 내용을 불러오게 되어 컨텍스트가 낭비됩니다. 필요할 때만 디자인 시스템이 작동하게 만들 수는 없을까요?

디자인 시스템을 통일 가능한 스킬 구축 방법

먼저 피그마에서 마스코트 캐릭터와 대시보드 시안을 정리했습니다. 캐릭터는 해골 콘셉트로 잡았고 이름은 `척척이`로 정했습니다. 코칭센터 화면을 중심으로 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 대상 수상

팀원들이 각자 기능을 개발하면서도 화면 톤이 흐트러지지 않았습니다. 컬러, 폰트, 간격 모두 일관됐습니다. 짧은 시간 안에 디자인 산출물을 빠르게 확장할 수 있었던 건 이 구조 덕분이었습니다. 발표 당일에는 미니 배너와 스티커까지 직접 제작해 데모 부스를 꾸렸습니다. 해골 캐릭터 척척이가 프린트된 스티커를 보고 다들 웃어줬던 게 기억에 남습니다.

KakaoTalk_Photo_2026-07-03-13-06-21.jpeg 척추척척추 팀은 5th SIPETHON 대상을 수상했습니다. 디자인이 한몫했다는 게 뿌듯합니다. 처음에는 화면을 예쁘게 그리는 게 제 역할이라고 생각했는데 돌이켜보면 팀 전체가 일관된 디자인으로 작업할 수 있는 환경을 만든 경험이 추후에 도움이 될 것 같습니다.

posts[SIPE 5기 해커톤 대상 후기] 개발자의 허리를 책임지는 허리피라우 서비스 회고록.md
01020304050607080910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
> SIPE 5기 해커톤에 참여했습니다. 팀에서 디자인을 맡게 됐는데 단순히 화면을 예쁘게 그리는 것에서 끝나지 않았습니다. 팀원들이 각자 다른 파트를 개발하는 상황에서 어떻게 하면 디자인이 흐트러지지 않을지를 고민했고 그걸 개발적인 방식으로 풀어내야 했습니다. 그 과정을 정리해봅니다.
## 팀 빌딩
스파크 세션에서 총 24개의 아이디어가 나왔습니다. 그중 허리 피라우 서비스가 유독 눈에 들어왔습니다. 평소 개발할 때 자세가 영 좋지 않았던 저한테 딱 필요한 서비스였습니다. 바로 투표를 했고 그렇게 척추척척추 팀에 합류하게 됐습니다.
(당시 스파크 세션 현장은 [여기](https://www.instagram.com/p/DZ1Ms7vAQcE/?img_index=1&igsh=eTB2cWIxcW50M2di)에서 볼 수 있습니다.)
## 디자인 시스템 적용 문제
해커톤 일정은 촉박했고 팀원들은 각자 기능 개발을 빠르게 진행해야 했습니다. 그 속도에 맞춰 화면을 하나하나 디자인해줄 여유가 없었습니다. 그렇다고 팀원들에게 UI를 자유롭게 맡기면? 컬러나 폰트크기가 제각각으로 같은 앱 처럼 보이지 않을 게 뻔했습니다.
역할 분담은 이렇게 했습니다.
- 윤홍비 : 디자인, UI, 홍보물
- 박지훈 : 화면 피드백/애니메이션(디자인/캐릭터 기반으로 유저에게 바른자세/나쁜자세에 대한 피드백)
- 민경언 & 박진현 : 사용자 여정, 측정 시나리오(앱이 자동으로 실행되고 난 후의 동작들)
- 권용민 : 로그인, 소셜 관련 기능(최대한 간단한 로그인 구현, 다른 사용자와 자세 지표를 수치화&비교)
- 강창우 : 데스크톱 앱 포팅, 기타 기능들 추가 개발
팀원 간 역할이 제각각이기 때문에 각자 다른 화면을 각자의 방식으로 만들고 있는 상황이었습니다.
동시에 또 다른 고민이 있었습니다. 디자인 가이드를 CLAUDE.md에 통째로 넣어두면 UI와 전혀 상관없는 작업을 할 때도 매번 그 내용을 불러오게 되어 컨텍스트가 낭비됩니다. 필요할 때만 디자인 시스템이 작동하게 만들 수는 없을까요?
## 디자인 시스템을 통일 가능한 스킬 구축 방법
<div style="display: flex; gap: 8px;">
<img src="https://lfmgqfrdtvadgjczglzk.supabase.co/storage/v1/object/public/blog-uploads/blog-images/1783051229403-u8434k.png" style="width: 50%; height: auto; object-fit: contain;" />
<img src="https://lfmgqfrdtvadgjczglzk.supabase.co/storage/v1/object/public/blog-uploads/blog-images/1783051237911-egjfl.png" style="width: 50%; height: auto; object-fit: contain;" />
</div>
먼저 피그마에서 마스코트 캐릭터와 대시보드 시안을 정리했습니다. 캐릭터는 해골 콘셉트로 잡았고 이름은 `척척이`로 정했습니다. 코칭센터 화면을 중심으로 UI를 구체화했는데 원래 창우님이 임시로 잡아둔 대시보드 전체를 구현하고 싶었지만 시간이 부족해 코칭센터 화면만 우선 완성했습니다.
<div style="display: flex; gap: 8px;">
<img src="https://lfmgqfrdtvadgjczglzk.supabase.co/storage/v1/object/public/blog-uploads/blog-images/1783051334827-fm0yqi.png" style="width: 50%; height: auto; object-fit: contain;" />
<img src="https://lfmgqfrdtvadgjczglzk.supabase.co/storage/v1/object/public/blog-uploads/blog-images/1783051365677-z3ghy.gif" style="width: 50%; height: auto; object-fit: contain;" />
</div>
다음으로 피그마에서 척척이 캐릭터를 머리, 몸통, 팔, 다리 등으로 그룹화해 세분화한 뒤 리깅 작업은 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 대상 수상
팀원들이 각자 기능을 개발하면서도 화면 톤이 흐트러지지 않았습니다. 컬러, 폰트, 간격 모두 일관됐습니다. 짧은 시간 안에 디자인 산출물을 빠르게 확장할 수 있었던 건 이 구조 덕분이었습니다.
<img src="https://lfmgqfrdtvadgjczglzk.supabase.co/storage/v1/object/public/blog-uploads/blog-images/1783051606113-33adr.jpeg" style="width: 50%; height: auto; object-fit: contain;" />
발표 당일에는 미니 배너와 스티커까지 직접 제작해 데모 부스를 꾸렸습니다. 해골 캐릭터 척척이가 프린트된 스티커를 보고 다들 웃어줬던 게 기억에 남습니다.
![KakaoTalk_Photo_2026-07-03-13-06-21.jpeg](https://lfmgqfrdtvadgjczglzk.supabase.co/storage/v1/object/public/blog-uploads/blog-images/1783051706032-yhldw.jpeg)
척추척척추 팀은 **5th SIPETHON 대상**을 수상했습니다. 디자인이 한몫했다는 게 뿌듯합니다. 처음에는 화면을 예쁘게 그리는 게 제 역할이라고 생각했는데 돌이켜보면 팀 전체가 일관된 디자인으로 작업할 수 있는 환경을 만든 경험이 추후에 도움이 될 것 같습니다.
○ hov_i [main] ⚡