(주)원더라운드
2025.04 ~ 현재
551일째 근무 중1.
디자인 값 · 컴포넌트를 한 곳에서 관리하는 디자인 시스템 설계
- Problem
디자이너 · 기획자 · 개발자가 아이디어 → 기획 → 목업 → 피그마 → 개발 순서로 작업을 차례로 넘겨받는 구조라, 단계마다 병목이 생겨 작업 한 건에 평균 4~6주가 소요
Solution같은 디자인 규칙과 컴포넌트로 실제 앱 화면을 바로 만들고, 개발 환경이 없어도 브라우저 링크 하나로 결과를 확인할 수 있는 디자인 시스템과
react-native-web기반 미리보기 환경을 직접 설계 · 구축. Claude Code 작업 환경과 함께 도입하여 작업 건당 소요 기간을 평균 1~2주 수준으로 단축 색 · 글자 · 둥글기 같은 디자인 값은 토큰 파일 한 곳에서만 관리하고,
Style Dictionary빌드로 앱(Tamagui테마)과 웹(CSS 변수)이 각자 필요한 형태로 자동 변환해 쓰도록 구성. 앱 화면은 디자인 시스템 패키지가 제공하는 컴포넌트만 쓰게 하여, 나중에 스타일 구현 방식이 바뀌어도 화면은 그대로 두고 패키지 내부만 고치면 되도록 설계
2.
디자이너 · 기획자가 Claude Code로 직접 화면을 만들고, 규칙 · 권한은 자동으로 지켜지는 작업 환경 설계
Claude Code와의 대화만으로 화면 시안 제작, 디자인 규칙 변경, 피그마와 화면 주고받기까지 할 수 있도록 스킬 단위로 작업 흐름을 정리. 피그마 변경도 디자인 기준 문서에 먼저 반영된 뒤에만 화면에 쓰이게 하여, 누가 만들어도 같은 결과가 나오도록 구성
디자인 시스템 밖의 임의 색 · 크기, 다른 UI 라이브러리, 실제 서버 호출을 사람의 주의에 맡기지 않고 커스텀
ESLint규칙과 타입 검사로 자동으로 막도록 설정- Problem
GitHub 무료 플랜이라 비공개 저장소에서 브랜치 보호 · CODEOWNERS 같은 기본 안전장치를 쓸 수 없어, 개발에 익숙하지 않은 작업자가 실수로
main에 반영하거나 배포를 실행할 위험SolutionClaude Code
hook으로 명령 실행 직전에 작업자의 역할을 확인하여, 개발자가 아니면mainpush · PR 병합 · 배포 명령을 막도록 구성. 모든 변경이 PR과 CI(lint · typecheck)를 거쳐 개발자 확인 후에만 반영되도록 흐름을 정리
3.
만든 화면을 실제 앱으로 옮기는 인계 · 적용 구조 설계
완성된 화면 시안마다 앱 · API 저장소의 AI 에이전트가 그대로 읽고 구현할 수 있는 인계 명세를 만들도록 구성. 앱용 / API용으로 나누고 이번 범위에서 빠지는 것 · 가정한 것 · 검수 체크리스트를 함께 적어, 다른 저장소에서도 같은 화면을 다시 만들 수 있도록 설계
기존 앱 화면은 지금 모양을 그대로 유지한 채 디자인 시스템으로 옮기고, 디자이너의 개선 사항은 패키지 버전 고정과 변경 기록(
changesets)으로 따로 묶어 반영하여 옮기는 과정에서 생긴 문제와 의도한 변경이 섞이지 않도록 분리. 토스트 · 바텀시트 · 이미지처럼 네이티브 동작이 걸린 라이브러리는 앱에 그대로 두고 디자인 시스템은 모양 부품만 제공하여, 기존 호출 코드의 수정 범위를 최소화- Problem
앱 안에서 열리는 웹뷰 화면이 앱과 다른 모양으로 그려져, 한 앱 안에서 두 가지 디자인이 섞이는 문제
Solution웹뷰용 컴포넌트를 따로 만들지 않고 앱과 같은 디자인 시스템을
react-native-web으로 웹뷰에서도 그대로 쓰도록 구성하여, 네이티브 화면과 웹뷰 화면이 하나의 디자인 기준을 공유하도록 통일