안녕하세요! 오늘은 코딩을 몰라도 AI(클로드, Claude)와 대화만으로 나만의 아마즈핏(Amazfit) 워치페이스를 직접 만들어본 과정을 공유하려고 해요. 실제로 심박수·배터리 서브다이얼, 실시간 달의 위상(문페이즈)까지 들어간 워치페이스를 처음부터 끝까지 클로드와의 대화만으로 완성했습니다.
총 3편으로 나눠서 정리했어요.
- 1편(이 글): 시작 전 준비물 — Node.js, Zepp 개발 도구, 개발자 계정 등록
- 2편: 실제로 워치페이스를 만들고 내 워치에 설치하기
- 3편: 만들면서 자주 만난 오류와 해결법 모음
 |
| 어메이즈 핏 액티브2 스퀘어 모델 |
목차
- 왜 클로드로 워치페이스를 만들 수 있을까?
- 1단계. Node.js 설치하기
- 2단계. Zepp 개발 도구(zeus-cli) 설치하기
- 3단계. Zepp 개발자 콘솔 가입 & 로그인
- 4단계. 워치페이스 등록하고 appId 발급받기
- 다음 편 예고
왜 클로드로 워치페이스를 만들 수 있을까?
아마즈핏 같은 Zepp OS 기반 스마트워치는 공식 개발 도구(Zepp OS SDK)로 워치페이스를 직접 코딩해서 만들 수 있어요. 문제는 이게 자바스크립트 코드와 이미지 에셋을 손수 만들어야 해서 일반인에게는 진입장벽이 높다는 거였죠.
그런데 클로드(Claude) 같은 AI는 원하는 디자인을 사진으로 보여주거나 말로 설명하면, 워치페이스 코드(index.js)와 시계 바늘·눈금·아이콘 같은 이미지 파일들을 전부 직접 생성해줍니다. 저는 코드를 한 줄도 직접 안 쓰고, 클로드가 만들어준 파일을 제 컴퓨터의 정해진 폴더에 넣고 빌드 명령어만 실행하는 방식으로 완성했어요.
1단계. Node.js 설치하기
Zepp OS 개발 도구는 Node.js 위에서 동작해요. 아래 순서로 설치하세요.
- nodejs.org 접속
- LTS 버전의 Windows 설치 파일(.msi) 다운로드(위 사진에 초록색 부분 윈도우 버전 다운 )
- 다운로드한 파일 더블클릭 → Next만 눌러서 설치
- 설치 후 확인: 명령 프롬프트(cmd)를 열고 아래 명령어 입력
node -v
npm -v버전 번호가 뜨면 성공이에요.
💡 팁: 설치 방식을 고를 때 nvm, fnm, Docker 같은 옵션이 나오는데, 처음이라면 전부 무시하고 그냥 공식 .msi 설치 파일을 받아서 더블클릭 설치하는 게 제일 간단해요.
2단계. Zepp 개발 도구(zeus-cli) 설치하기
명령 프롬프트(cmd)에 아래 명령어를 입력하세요.
npm install -g @zeppos/zeus-cli설치가 끝나면 확인해보세요.
zeus -V버전 정보나 사용법 안내가 뜨면 정상적으로 설치된 거예요.
3단계. Zepp 개발자 콘솔 가입 & 로그인
console.zepp.com에 접속해서 회원가입/로그인하세요. 워치페이스를 실제 기기에 설치하려면 이 계정이 필요해요.( 실제 워치를 사용하고 있는 계정을 넣어서 가입해주세요.)
로그인한 뒤에는 컴퓨터에서도 같은 계정으로 로그인해야 해요. cmd 창에 아래 명령어를 입력하세요.
zeus login웹브라우저가 열리면서 로그인 화면이 뜨는데, 방금 가입한 계정으로 로그인하면 자동으로 연결돼요.
이거 잠깐 열어두세요
4단계. 워치페이스 등록하고 appId 발급받기
다시 가입하고 로그인한 개발자 Zepp 콘솔 왼쪽 메뉴에서 워치페이스 → 워치페이스 만들기를 클릭하세요.
- 원하는 이름 입력 (나중에 바꿀 수 있어요)
- 지원 기기 선택 (제 경우 Amazfit Active 2 Square)
- 생성 완료
목록에 새로 생긴 워치페이스의 앱아이디(appId) 숫자를 꼭 기억해두세요. 이 숫자가 있어야 나중에 프로젝트 설정 파일(app.json)에 넣을 수 있어요. 아래 사진처럼 떠요
다음 편 예고
여기까지 준비가 끝났다면, 2편에서는 클로드에게 실제로 워치페이스를 요청하고, 받은 파일로 프로젝트를 만들어서 진짜 워치에 설치하는 과정을 다룰게요. 이어서 보시려면 아래 링크를 확인해주세요!
댓글 없음:
댓글 쓰기