타이젠OS의 기어 S2에 기어 왓치 디자이너로 나만의 시계만들어서 탑재해 보았습니다. 중간 중간 작은 어려움이 있었지만, 개발자나 디자이너가 아니더라도 자기만의 스타일로 기어 S2 시계화면을 꾸밀 수 있습니다. 도전해 보세요!

왓치 디자이너가 무엇인지 모르시는 분은 이전글을 확인해 주세요.
손쉽게 나만의 기어 S2 시계를 만들자! 기어 왓치 디자이너 출시!

맛소금 시계화면 만들기

예제를 바탕으로 만드는것이 제일 좋겠죠?ㅎ 제가 만든 시계화면의 프로젝트파일과 리소스파일을 공유합니다. 첨부파일과 맛소금 깃허브에 올려두었어요~ㅎ

기본화면으로 가족사진을 앞에 두고 터치하면 시간과 날짜, 배터리 상태가 표시됩니다. 사진은 시간마다 바뀌게 할 수도 있지만, 3개의 사진이 교체되도록 해두었습니다. 3시 방향에 분을 표시하는 디지털 시계를 두었고, 터치하면 뮤직앱이 실행됩니다.

만드는 방법

차례 차례 따라해 보심 나만의 시계가 똭!

배경 설정하기

Component에서 백그라운드를 선택해서 circle.png 이미지를 설정합니다. 그리고 Appearance 설정에서 색상변경 기능으로 검은색으로 변경합니다.

분 표시 원형 선 그리기

분을 표시하는 원형 선을 그리기 위해 우선 절반짜리 검은 배경을 왼쪽에 배치합니다.

그리고 검은 배경 뒤쪽으로 원형 도형이 나올 수 있게 분침(Watch Hand)를 추가합니다.

아래와 같이 설정합니다. 아래 내용은 흰색도형을 추가하고 색상을 변경하고 있는데, 나중에 색상이 변경된 이미지 파일로 대체하였습니다. (베타 버전이라 그런지 색상 변경 기능에 조금 문제가 있는것 같습니다. 프로그램이 강제 종료되는...;;)

여기까지하면 30분까지 검은 이미지 뒤에서 분침 이미지가 시각에 맞게 나옵니다. 문제는 30분 이후 다시 검은 색이 생기기 때문에 분침과 동일한 색의 이미지를 오른쪽에 추가해줍니다.

위 이미지는 매시 30분부터 정각 직전까지만 표시되어야 합니다. 아래와 같이 순서와 설정을 맞춰주는 것이 핵심 팁입니다. 드래그해서 선택한 다음 마우스 우클릭해서 show 와 hide 를 구분해서 선택하면 됩니다.

Scale을 Minute로하여 설정을 한다음 Scale을 hour로 변경해서 24시 모두에 적용해줍니다. 복붙(copy and paste)가 가능합니다! 좋네요! :)

시간바를 밀어 가면서 정상적으로 동작하는지 확인해 보세요~

시간 표시 선 그리기

시간 표시를 위해서 시침(Watch Hand) 추가 해줍니다. 이번에는 기본제공하는 것 중 하나를 골라서 사용하였습니다. 크기와 색상을 변경하고, 위치와 회전 설정을 해줍니다.

디지털 시계(분) 추가하기

디지털 시계가 잘 보일수 있게 반투명 배경을 설정해줍니다. 배경은 이미지 추가와 같고, 이번에는 특별히 버튼을 설정해줍니다. 시계쓰다보니 내가 원하는 앱을 바로 실행시킬 수 있는 버튼 한두개있으면 좋더라구요. 시계에서 바로 실행 가능합니다.ㅎ

그리고나서 디지털 시계를 추가해 주고, 세부 설정을 해줍니다. Type에서 분만 표시되도록 하였습니다. 직접 수정해서 표시 포맷을 정할 수 있습니다.

폰트는 제가 좋아하는 RaleWay 폰트입니다. 비트맵으로 설정했습니다. RaleWay를 직접 비트맵으로 떠서 배경을 투명하게 처리한 이미지도 함께 공유해드립니다! 높이를 맞춰서 이미지를 확보해야해서 신경을 좀 써야합니다. 시간 많이 걸린 작업입니다.ㅠ

비트맵 폰트를 사용할때는 폰트 사이즈는 이미지 사이즈로 수정해야 합니다. 힘듭니다...후...

검은 원 이미지를 추가해서 분을 나타내는 원형 이미지가 선이 되도록 합니다.

자세한 시간과 배터리 상태

메인 사진을 터치했을때 보여질 자세한 시간관 날짜 배터리 상태를 추가합니다.

디지털 시계 2개 추가. 한번 해봤으니 어렵지 않으실거에요.

Complications에서 배터리 상태를 선택해서 추가합니다. 추가하면...타임라인에 열라많은 항목이 나타납니다. 자그마치 24개. 순서 바꿀때 노가다 했습니다.ㅠ

메인 사진 설정

마지막으로 메인 사진 추가! 이쯤하셨으면 이미지 추가하는 건 일도 아닐겁니다.ㅋ 이미지를 추가하고 액션텝에서 이미지를 터치했을때 투명 이미지로 변경되도록 설정해 주세요. 그래야 사진을 터치하면 자세한 시간과 배터리 상태가 보입니다!

메인 사진은 원하는 대로 추가하면 됩니다. 저는 일단 3장을 추가해 놨습니다. 아침엔 애기 사진, 낮에는 여친 사진, 밤에는 자는 사진.ㅎ

폰에 넣기

Run on Device로 본인의 폰에 설치하면 됩니다. 이때 같은 무선 공유기(AP)에 PC와 S2가 모두 연결되어 있어야 합니다.

연결 동작이 좀 불안정합니다. 자세한 내용은 아래 블로거님의 포스팅을 참고하세요. http://storycompiler.tistory.com/163

작은 문제와 해결 방법

아직 베타라서 소소한 문제들이 있습니다. 소소한 해결방법도 같이 공유합니다.

인증서 문제 빈번함

Distributor Certificate 문제 빈번히 발생함, 같은데 왜 문제가 되지? 저만의 해결방법은...인증서 삭제후 다시 생성. 다시 할때 Debug 폴더도 날리고...ㅠ

색상 변경 기능 잘 안됨

색상변경하고 저장 후 다시 로드하면 색상변경 안되어 있음 수정하려고 adjust color 눌렀다가 해제하면...프로그램 강제종료됨 저만의 해결방법은...당분간 그 기능은 외면해주는 걸로.

java.lang.NullPointerException
    at wfb_view.common.ShortcutManager.handleEvent(ShortcutManager.java:86)
    at org.eclipse.swt.widgets.EventTable.sendEvent(EventTable.java:84)
    at org.eclipse.swt.widgets.Display.filterEvent(Display.java:1262)

작은 사이즈 비트맵 이미지 폰트 문제

숫자 비트맵 이미지로 변경하고 프로젝트 저장 -> 다시 불러오면...일반 font로 변경되어 있음 저만의 해결방법은...매번 다시 설정...;;

컴퓨터와 연결 잘 끊김

기어 왓치 디자이너 프로그램이 자동으로 연결해주기도 하지만 안될때도 많으네요. 저만의 해결방법은...command 창을 열어두고 지속적으로 sdb connect…로 다시 연결.

Complication 덩어리 조작 힘듬

레이어(?) 그룹으로 만들어 지지 않아서 배터리 Complication 만들어서 순서 변경하려면 24개 레이어를 하나씩 옮겨줘야 함. 노가다…ㅠ 저만의 해결방법은...최초 추가했을때 위치를 보정해줌. 한번이라도 잘못 건들면 끝장이다.

이미지가 이미 있다고?

이미지를 추가했다가 지우고 나서 다시 그 이미지를 추가하려면 추가안됨 저만의 해결방법은...res 폴더에 가서 그 이미지 수동으로 제거해줌

마치며...

아마, 센스 좀 있으신 분이라면 금방 쉽게 만드실 수 있을 겁니다! 제가 만든것보다 훨씬 멋지고 놀랄만한 아이디어로!!! .gwd가 널리 널리 공유되는 상상을 해봅니다! 화이팅~