AI 기반 워치페이스 자동 생성 시스템 구축

스마트워치 시계 화면(워치페이스)을 하나하나 수동으로 디자인하는 대신, Gemini AI를 활용해서 다이얼 자동 생성 + 라이트/다크 모드 손 색상 자동 매칭으로 11개 페이스를 한 번에 만드는 팩토리 시스템을 구축했다.

왜 워치페이스 자동화가 필요했나

워치페이스 디자인은 겉으로는 "시간을 보여주는 화면"이지만, 실제로는 사용자가 매일 마주하는 핵심 UI다. 예쁜 다이얼, 읽기 좋은 숫자 배치, 시침/분침의 명확한 대비, 그리고 낮/밤 모드에서 모두 잘 보이는 색상 조화—이 모든 게 맞춰져야 하는데, 이걸 손으로 11개씩 만들려면 상당한 시간이 든다.

기존 방식이면 겪게 되는 문제들:

• 디자이너가 다이얼 이미지를 개별적으로 그려야 함
• 각 다이얼마다 라이트 모드용, 다크 모드용 손 색상을 따로 선택
• 11개 페이스 × 2 모드 = 수십 가지 색상 조합을 수동 관리
• 새 디자인을 추가할 때마다 같은 과정을 반복

결국 팀 입장에서는 "빨리 다양한 선택지를 사용자에게 주면서도, 품질은 일관되게 유지하려면?" 이라는 딜레마가 생긴다. 여기서 AI를 도입하면, 기본 스타일만 정해두고 나머지는 자동으로 생성할 수 있다.

Gemini 다이얼 생성 + 자동 팔레트 매칭

이번 작업의 핵심은 세 가지다:

Gemini를 활용한 다이얼 생성은 아마도 "밝은 톤 미니멀 스타일", "따뜻한 톤 라운드 숫자", "세련된 초침 디자인" 같은 스타일 가이드를 프롬프트로 주고, Gemini 이미지 생성으로 다이얼을 뽑는 방식일 것 같다. 사람이 일일이 그리지 않으면서도 일관성 있는 결과물을 얻는다.

Light/Dark 손 색상 자동 팔레트가 특히 흥미로운데, 여기서 배운 점이 있다:

• 라이트 모드: 밝은 배경에서 손이 잘 보이려면 어두운 색 필요 (검정, 짙은 회색)
• 다크 모드: 어두운 배경에서는 밝은 색이 필요 (흰색, 밝은 회색)

단순히 "밝으면 어둡게, 어두우면 밝게"가 아니라, 각 다이얼의 주요 색상을 분석해서 어울리는 톤을 자동으로 선택하는 로직이 있을 것으로 추측된다. 파란 톤 다이얼이면 손도 파란 회색, 따뜻한 톤이면 갈색 계열 같은 식으로.

// 손 색상 자동 선택 로직 (개념도)
선택 다이얼 색상 추출
  ↓
라이트 모드: 어두운 색상 생성 + 명도 차이 확인 (WCAG AA 이상)
다크 모드: 밝은 색상 생성 + 명도 차이 확인
  ↓
최종 손 색상 결정

이건 디자인 일관성 보장 + 속도 극대화의 좋은 사례다. 팀이 커질수록 "모든 페이스가 같은 퀄리티 기준"을 유지하기가 힘든데, 자동화하면 기준이 코드에 박혀서 휴먼 에러가 줄어든다.

빌드 시스템과 에셋 관리

변경 파일들을 보면 구조가 꽤 체계적이다:

• build.gradle.kts, faces/apex/build.gradle.kts: 워치페이스 생성 로직을 빌드 파이프라인에 통합. 아마도 Gemini API 호출, 이미지 처리 라이브러리 의존성, 그리고 생성 스크립트 실행 로직이 들어가 있을 것.
• faces/apex/assets/dial_src.png, watchbody.png: 생성된 다이얼 이미지들과 시계 본체 에셋. 11개 페이스가 생성되면서 여러 버전의 다이얼이 이 폴더 아래 저장될 것.
• .gitignore: 생성된 이미지나 임시 파일들을 깃에서 제외. 매번 빌드할 때마다 새로 생성되므로 버전 관리 대상이 아닐 수 있다.
• README.md: 팀원들이 새 워치페이스를 추가하는 방법을 문서화했을 것. "styles/ 폴더에 스타일 정의 추가 → ./gradlew build 실행 → 자동으로 11개 페이스 생성" 같은 내용.

특히 build.gradle.kts를 건드린 것이 중요하다. 이렇게 하면 새로운 팀원도 그냥 ./gradlew build 한 번 실행하면, 복잡한 수동 스텝 없이 자동으로 모든 워치페이스가 생성된다. 진입 장벽을 없앤 셈이다.

회고: 창의적 작업의 자동화는 속도 × 일관성

이 작업에서 느낀 점은, AI를 "창의적 작업"에 쓸 때 인간의 개입 방식이 중요하다는 것이다.

만약 "다이얼 완전 랜덤 생성"해서 사용자에게 주면 흥미롭겠지만, 어떤 페이스는 읽기 어려울 수도 있다. 대신 우리는 "기본 스타일 가이드 → Gemini → 자동 색상 판단" 이라는 파이프라인을 만들었다. 인간은 "어떤 스타일들이 필요한가"에만 집중하고, 나머지는 자동화된 것.

비슷한 상황은 많다:
- 앱 아이콘을 여러 사이즈로 내보내야 할 때 → 이미지 처리 자동화
- API 응답을 여러 언어로 번역해야 할 때 → 번역 API 통합
- 디자인 시스템의 색상 토큰을 여러 포맷으로 생성할 때 → 제너레이터 도구

핵심은 "반복되는 부분은 자동화, 결정해야 할 부분은 명시화" 하는 것. 그리고 빌드 파이프라인에 녹여내기로 진입 장벽을 없애는 것.

이번에 11개 페이스를 한 번에 만들면서, 앞으로 팀이 새로운 스타일을 추가하고 싶을 때 시간이 몇 배 단축될 것 같다. 다음에 비슷한 자동화 작업이 생기면, "스타일 정의 → AI 생성 → 자동 팔레트" 이 패턴을 다른 곳에도 적용해볼 가치가 있을 것 같다.

🛒 이 글과 어울리는 추천 상품

• 4K모니터 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →
• 인체공학마우스 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.