1편에서 개발 환경 준비를 마쳤다면, 이제 진짜로 워치페이스를 만들 차례예요. 이번 편에서는 클로드에게 어떻게 요청했는지, 받은 파일을 어디에 넣는지, 그리고 실제 워치에 설치하는 방법까지 순서대로 정리했어요.
목차
- 클로드에게 워치페이스 요청하기
- zeus create로 프로젝트 만들기
- 클로드가 만들어준 파일 넣기
- app.json에 appId 넣기
- zeus preview로 QR코드 만들어서 설치하기
- 디자인 다듬기 — 내 스타일로 요청하는 법
1. 클로드에게 워치페이스 요청하기
가장 먼저 할 일은 클로드에게 어떤 워치페이스를 만들고 싶은지 설명하거나, 원하는 디자인 사진을 첨부해서 보여주는 것이에요. 저는 이렇게 요청했어요.
"이 사진처럼 심박수·배터리 서브다이얼이 있고, 아래에 실제 오늘 날짜 기준 달의 위상이 나오는 워치페이스를 아마즈핏 액티브2 스퀘어용으로 만들어줘."
클로드는 이 요청을 받아서 워치페이스 동작 코드(index.js)와 시침·분침·초침, 눈금, 아이콘, 달 위상 이미지 같은 그래픽 파일들을 전부 직접 만들어서 압축 파일(zip)로 줘요. 코드를 하나도 몰라도 되는 이유가 이거예요 — 클로드가 실제 파일을 만들어주니까요.
2. zeus create로 프로젝트 만들기
명령 프롬프트(cmd)를 열고, 프로젝트를 만들 폴더로 이동한 다음 아래 명령어를 입력하세요.
zeus create my-watchface
몇 가지를 순서대로 물어보는데 이렇게 답하면 돼요.
위 사진처럼 CMD에 뜹니다.
- 앱 종류: WATCHFACE
- API 레벨: 2.0
- 템플릿: Empty
- 지원 기기: 내 워치 기종만 체크(스페이스바로 선택/해제, 다른 건 전부 해제) 중복으로 선택 되어 있는지 키보드 화살표 위, 아래 키로 내려가며 확인 해주세요. 그래야 본인 워치의 사이즈에 맞게 들어갈 파일이 생성되는 동시에 아래의 이미지 처럼 ZEEP가 생성되면 성공 입니다.
완료되면 my-watchface라는 폴더가 다운로드 폴더에 생겨요 생기고, 그 안에 app.json, watchface, assets 폴더가 자동으로 만들어져요. ( 본인이 처음 클로드로 다운 받은 파일명에 따라 그 이름과 비슷한 파일이 생성 됩니다.
3. 클로드가 만들어준 파일 넣기
클로드가 준 zip 파일을 압축 풀면 보통 아래처럼 구성돼 있어요.
app.json
watchface/index.js
assets/(이미지 파일들)
이걸 방금 만든 my-watchface 프로젝트 폴더 안의 같은 이름 파일/폴더에 덮어쓰기 하면 돼요.
기존에 클로드 다운 받은 것을 코딩으로 위의 ZEEP 로 표시된 만든 파일에 위 3개의 파일을 덮어쓰기 해주시면 됩니다.
⚠️ 주의: 이미지 파일들은assets폴더 바로 아래가 아니라,assets/[기기이름]/하위 폴더 안에 들어가야 인식돼요. zeus create가 자동으로 만들어준 그 하위 폴더를 꼭 확인하세요. 이 부분이 무슨 말이지 모르겠으면 클로드 한태 알려달라고 하면 본인의 파일명에 맞게 상세하게 설명해줍니다.
4. app.json에 appId 넣기
app.json 파일을 메모장으로 열어서 appId 값을 1편에서 발급받은 숫자로 바꿔주세요.
"appId": 여기에_내_appId_숫자,
저장하면 준비 끝이에요.
5. zeus preview로 QR코드 만들어서 설치하기
cmd에서 프로젝트 폴더 안으로 이동한 다음 입력하세요. 그 파일이 다운로드된 곳 즉 클로드에서 다운 한 파일에 들어가서 위 검색창에 주소가 있을 건데 그거 다 지우고 cmd라고 입력하면 그 경로된 cmd가 열리면서 아래 입력하시면 됩니다.
cd my-watchface
zeus preview
잠시 기다리면 화면에 QR코드가 나타나요. 이제 스마트폰에서 설치하면 됩니다. (아래 사진 참고)
- 스마트폰 Zepp 앱 → 프로필 → 설정 → 정보(About)에서 Zepp 아이콘을 7번 연속 탭 → 개발자 모드 켜기
- 그러면 아래에 계발자모드 활성화 되어 있고 그 상태에서 뒤로가기 눌러서 그 전 화면에서 설정들 다시 들어가면 아래의 설정처럼 체크 되어 있으면 됩니다.
- 내 워치페이지를 들어가서 페이지 하단 일반 >> 개발자모드>> 위 상단에 플러스 버튼 들어가면 ( QR모양)에서 Scan 선택
- 컴퓨터 화면의 QR코드를 스캔
스캔이 끝나면 잠시 후 워치에 새 워치페이스가 설치돼요!
만약 설치 되지 않으면 같은 pc나 노트북에 같은 와이파이가 설치 되어 있어야 하고 불루투스를 시계와 연결해 놓은 상태여야 됩니다. 만약 그렇게 해도 다운 받을 수 없거나 페일드라고 뜨면 클로드한태 브릿지로 해서 다운 받는 방법을 알려 달라고 하면 설명 해줍니다.
6. 디자인 다듬기 — 내 스타일로 요청하는 법
한 번에 완벽하게 나오지 않아도 괜찮아요. 클로드에게 스크린샷을 다시 찍어서 보여주면서 구체적으로 요청하면 계속 다듬어줘요. 제가 실제로 썼던 요청 예시예요.
- "바늘이랑 눈금이 너무 얇아서 허전해 보여, 두껍게 키워줘"
- "서브다이얼을 남색으로 채우고 안에 글자는 흰색으로 해줘"
- "사각형 워치니까 눈금도 원형이 아니라 사각 테두리를 따라가게 해줘"
이렇게 사진과 함께 구체적으로 요청할수록 결과물이 빠르게 원하는 모습에 가까워져요.
이런 식으로 계속 파일을 클로드와 주고 받으면서 확인하고 수정하고 만드시면 됩니다. 제 생각엔 이 작업이 반복되는게 제일 힘들거 같아요.
수정한 파일을 다시 프로젝트 폴더에 덮어쓴 다음, zeus preview를 다시 실행하고 새로 뜨는 QR코드를 스캔하면 바로 반영돼요.
다음 3편에서는 이 과정에서 실제로 만났던 대표적인 오류들과 해결법을 정리해서 알려드릴게요. 막히는 부분이 있다면 3편을 참고해주세요!
댓글 없음:
댓글 쓰기