아이폰 아날로그시계 위젯 만들기 무작정 따라 하기

자료실에 아이폰 아날로그시계 위젯 파일을 올렸습니다. 아래 링크를 참조하세요.

KWGT에 입문하면 한 번쯤 아이폰의 위젯들을 따라 만들어본 적 있을 겁니다. 이번에는 애플 위젯인 아...

m.blog.korea-iphone.com

이번에는 이 아날로그시계를 만드는 방법에 대해 알려드리겠습니다.

목표

1. 확장 기능에 대해 알기

2. 다크 모드 함수 알기

3. if 함수 알기

4. sin과 cos 함수를 알고, 이를 이용하여 위치 지정하기

5. 시 또는 분에 따라 도형 움직이게 하기

만들기에 앞서, 어떻게 만들 것인지 아래 개요를 확인하고 몇 가지 용어(제 블로그에서만 사용) 정리를 하겠습니다.

첫 번째 사진에서 +를 누르면 나오는 두 번째 사진 항목들을 오브젝트라고 하겠습니다. 그리고 간결히 { } 괄호 안에 표시하겠습니다.

세 번째 사진에서 우측 상단에 각각 지구본, 계산기라고 표기하고, 아래에 모양, 칠하기, 색보정, 위치, 터치를 메뉴 [ ]라고 하겠습니다. 그리고 모양, 폭, 높이, 모서리를 설정 < >이라고 하겠습니다.

( 예, {도형: 굵은부분} - [모양] - <폭:100> )

우리가 만들 위젯의 개요입니다. 이제 이 개요를 보며 만들어보겠습니다. 그리고 이번에는 갤럭시 설정 중 다크모드일 때 자동으로 색이 바뀔 수 있게 설정해 보겠습니다.

1. 확장 기능

우선, 확장 기능에 대해 설명해 보겠습니다. 확장 기능에서 설정하는 항목들은 이 위젯 전체에 적용할 수 있게끔 하는, 프로그래밍에서 전역 범위에 접근 가능한 변수 같은 기능을 합니다. 저랑 같이 하시면 자연스럽게 어떻게 적용되는지 아실 수 있을 겁니다.

[확장 기능]에서 +를 눌러 줍니다. [확장 기능 추가] 팝업이 뜨고 여기서 다크모드일 때 어둡게 표시할 색으로 표시하기 위해 <제목>은 "흑"으로 쓰고, <유형>은 "색"을 선택하고 확인을 누릅니다. 추가로 다크 모드에서 밝게 표시할 "백"과 원형의 색은 조금 다르게 보이기 위해 "원형흑"이라는 색을 만들어 주고 각각 색을 설정해 줍니다.

2. {중첩그룹 : 배경} - {도형 : 배경} 만들기

[목록]에서 오브젝트 {중첩 그룹 만들기}를 만들고, 체크박스를 눌러 우측 상단 연필을 누르면 이름을 변경할 수 있습니다. 중첩 그룹으로 들어가 {도형}을 만들고, 이름을 "배경"으로 바꿉니다. (이하 {도형 : 배경}이라 표시하겠습니다. [모양]에서 <모양 : 직사각형>으로, <폭>과 <높이>의 체크박스를 누르고 계산기를 누릅니다. <폭>을 누르면 공식 입력란이 나오는데 여기서 System info - 적용화면 폭 (개인 설정 부분)을 선택하고 확인을 누릅니다. <높이>를 누르고 System info - 적용화면 높이 (개인 설정 부분)을 선택합니다. 그러면 화면 가득 찬 네모가 됩니다. [칠하기] - <색>을 검은색을 고릅니다.

2. {중첩그룹 : 배경} - {도형 : 원형} 만들기

오브젝트 {도형 : 원형}을 만들고, [모양]에서 <모양 : 원형>, <폭 : 340>으로 설정합니다. <폭 : 340>은 사용자에 따라 다르게 설정하실 수 있습니다만 앞으로 진행될 과정에서 차이가 생길 수 있다는 점 아셨으면 좋겠습니다. [칠하기]에서 <색> 체크박스를 선택하고 계산기를 누릅니다. System info - Return 1 if system darkmode is on 선택하면 $si(darkmode)$ 함수가 나오고 위에 0 이 표시됩니다. 현재 다크모드면 1, 아니면 0으로 표시되므로 0 이니 현재 다크 모드가 아니라는 뜻입니다.

다음을 진행하기 전에 if 함수에 대해 알려드리겠습니다. $if(조건, 참, 거짓)$으로 조건에 맞으면 참으로 표시되고 아니면 거짓으로 표시하라는 함수입니다. 우리는 조건으로 시스템이 다크 모드이면 원형흑색으로 표시하고 다크 모드가 아니면 백색으로 표시하라고 하겠습니다.

$if(si(darkmode)=1, 여기까지 쓰고 아래 지구본을 누릅니다. 그러면 아까 확장 기능에 추가했던 항목들이 뜹니다. if 문에서 다크모드일 때 참인 값이 들어가야 하므로 "원형흑"을 선택합니다. 그러면 gv(원형흑)이라는 문구가 추가됩니다. gv는 grobal variable로 전역에서 쓰이는 변수 약자입니다. 마저 함수를 작성하면 다음과 같습니다.

$if(si(darkmode)=1,gv(원형흑),gv(백))$

확인을 누르고 나오면 색이 적용됩니다.

3. {중첩그룹 : 배경} - {프로그래스바 : 시침 눈금}과 {프로그래스바 : 분침 눈금}

시침눈금을 표시해 보겠습니다. {배경} - {프로그래스바 : 시침 눈금}과 {프로그래스바 : 분침 눈금}을 만들어줍니다. 먼저 시침눈금을 누릅니다. [프로그래스]에서 <프로그래스 : 커스텀>, <최소 : 0>, <최대 : 12>, <단계 : 0>, <모드 : 분열 프로그래스>, <부문 : 12>, <회전 : 매뉴얼>, <겹침 : 15>로 합니다.

[스타일]에서 <스타일 : 원형>, <크기 : 320>, <폭 : 4>, <높이 : 10>으로 합니다. [스타일]에서 <크기, 폭, 높이>는 원하는 길이로 바꾸셔도 됩니다.

[색]에서 <Bg색> 체크박스하고 계산기를 눌러 공식으로 들어갑니다. 시침 또한 다크 모드와 색을 다르게 할 것이기에 공식을 [도형 : 원형] - [칠하기] - <색>과 동일한 함수를 쓰겠습니다. 다만 gv(원형흑)색 대신에 gv(흑)색으로 바꾸겠습니다.

$if(si(darkmode)=1,gv(흑),gv(백))$

이번에는 {분침눈금}을 표시해 보겠습니다. [프로그래스]에서 <프로그래스 : 커스텀>, <최소 : 0>, <최대 : 60>, <단계 : 0>, <모드 : 분열 프로그래스>, <부문 : 60>, <회전 : 매뉴얼>, <겹침 : 15>로 합니다.

[스타일]에서 <스타일 : 원형>, <크기 : 320>, <폭 : 13>, <높이 : 10>으로 합니다. [스타일]에서 <크기, 폭, 높이>는 {시침눈금}의 값을 바탕으로 원하는 길이로 바꾸셔도 됩니다.

[색]에서 <Bg색 : #FF7F7F7F>로 설정합니다. 다크모드일 때와 아닐 때 배경이 변하더라도 눈에 잘 보이는 색이라 이렇게 설정했습니다.

4번째 사진에서 시침눈금과 분침눈금이 겹쳐져 있는 곳을 보면 분침눈금이 도드라져 보입니다. 이것은 {시침눈금}과 {분침눈금} 순서를 바꿔주면 해결 가능합니다. [목록] 순서상 아래에 있는 게 화면상 위에 보이기 때문입니다.

4. {중첩그룹 : 배경} - {중첩그룹 : 숫자 } 만들기

4-1. 덜 이쁘고 쉬운 방법

오브젝트 {시리즈}를 만들고,

[시리즈] - <모드: 시간(12h)>, <회전 : 매뉴얼>, <겹침 : 352>

[색] - <Fg색 : 검정>, <Bg색 : 검정>

[스타일] - <스타일 : 원형>, <간격 : 35>, <T크기 : 30>

으로 설정합니다. 그러면 사진과 같이 두 자릿수의 방향은 각각 다른 숫자가 나옵니다. 간편하지만 숫자 방향이 바깥으로 향해있습니다.

4-2. 이쁘고 어려운 방법

숫자를 하나씩 다 만들고 각각 다른 위치에 놓는 방법으로 반복 작업이 필요합니다. 하지만 보기에는 이쁘지요.

{중첩그룹 : 배경} - {중첩그룹 : 숫자} - {텍스트 : 12}를 만듭니다. [칠하기]에서 <색> 체크박스를 하고 계산기를 누릅니다. {중첩그룹 : 배경} - {프로그래스바 : 시침 눈금}과 똑같은 색으로 다크 모드를 적용할 것이기에 똑같은 함수 $if(si(darkmode)=1,gv(흑),gv(백))$를 적용합니다.

[텍스트]에서 <텍스트>를 눌러 숫자 12를 써주는데 글자를 두껍게 하기 위해 양쪽에 [b] [/b] 또는 6번째 그림에 두꺼운 B를 누르면 자동으로 [b] [/b]가 생성되고 그 사이에 숫자를 넣습니다.

[위치]에서 <하단 여백 : 260>으로 했습니다. 260은 사용자 환경에 따라 다르게 숫자를 적용해야 할 수 있는데 이 값이 다른 숫자들의 위치를 지정하게 될 기준이 되기에 잘 기억해야 합니다. 이제 {텍스트 : 12}를 복사하는 방법을 알려드리겠습니다.

{텍스트 : 12} 체크박스를 누르고 우측 상단 네모 두 개가 겹쳐져 있는 아이콘 (복사 아이콘)을 누릅니다. 그리고 옆에 서류철같이 생긴 아이콘 (붙여넣기 아이콘)을 누르면 똑같은 이름과 똑같은 설정의 오브젝트가 생깁시다. 복사를 11개 하고 이름을 각각 1부터 11까지 바꿔줍니다.

각 숫자들의 위치를 보다 정확하고 일률적인 지정을 위해 우리는 sin과 cos을 알아야 하고 KWGT에서 sin과 cos 함수를 알아야 합니다.

숫자 "1"을 예로 들어 만든 그림입니다. 한마디로 숫자 각각 위치를 지정하려면 각각 b와 c라는 여백값을 알아야 하고, 각 여백값은 공식을 통해 구할 수 있습니다.

KWGT에서 sin과 cos 공식은 다음과 같습니다.

$mu(sin, 각도)$

$mu(cos, 각도)$

a는 아까 기준이 되는 값으로 260(환경에 따라 다를 수 있음)으로 지정했습니다. 그렇다면 좌측 여백을 구하는 함수는 다음과 같습니다.

$260*mu(cos,60)$

하단 여백을 구하는 공식은 다음과 같습니다.

$260*mu(sin,60)$

이제 적용해 보겠습니다.

[텍스트] - <텍스트 : [b]1[/b]>

[위치] - <좌측 여백 : 계산기 - $260*mu(cos,60)$>, <하단 여백 : 계산기 - $260*mu(sin,60)$>

이 방법을 이용하여 1,2,3, ... , 11, 12까지 적용해 보겠습니다.

<텍스트> 값은 각각 숫자에 맞게 고쳐주시고, 여백이 0인 값은 표기 안 하고 값이 있는 여백만 표기하겠습니다.

{텍스트 : 2}

[위치] - <좌측 여백 : 계산기 - $260*mu(cos,30)$>, <하단 여백 : 계산기 - $260*mu(sin,30)$>

{텍스트 : 3}

[위치] - <좌측 여백 : 260>

{텍스트 : 4}

[위치] - <좌측 여백 : 계산기 - $260*mu(cos,30)$>, <상단 여백 : 계산기 - $260*mu(sin,30)$>

{텍스트 : 5}

[위치] - <좌측 여백 : 계산기 - $260*mu(cos,60)$>, <상단 여백 : 계산기 - $260*mu(sin,60)$>

{텍스트 : 6}

[위치] - <상단 여백 : 260>

{텍스트 : 7}

[위치] - <우측 여백 : 계산기 - $260*mu(cos,60)$>, <상단 여백 : 계산기 - $260*mu(sin,60)$>

{텍스트 : 8}

[위치] - <우측 여백 : 계산기 - $260*mu(cos,30)$>, <상단 여백 : 계산기 - $260*mu(sin,30)$>

{텍스트 : 9}

[위치] - {우측 여백 : 260>

{텍스트 : 10}

[위치] - <우측 여백 : 계산기 - $260*mu(cos,30)$>, <하단 여백 : 계산기 - $260*mu(sin,30)$>

{텍스트 : 11}

[위치] - <우측 여백 : 계산기 - $260*mu(cos,60)$>, <하단 여백 : 계산기 - $260*mu(sin,60)$>

여기까지.. 숫자 입력하기가 끝났습니다. 아날로그시계 만들기에서 가장 힘든 부분이었습니다.

5. {중첩그룹 : 배경} - {도형 : 중앙검정구멍} 만들기

{중첩그룹 : 배경} - {도형 : 중앙검정구멍}을 만듭니다.

[모양]에서 <모양 : 원형>, <폭 : 20>

[칠하기]에서 <색 : 계산기 - $if(si(darkmode)=1,gv(흑),gv(백))$>

여기까지가 배경 만들기였습니다. 여기에 시침과 분침만 올리면 끝입니다.

6.{중첩그룹 : 시침} - {도형 : 얇은부분}, {굵은부분} 만들기

시침을 얇은 부분과 굵은 부분을 먼저 만들어 모양을 만들고 시간에 맞게 움직일 수 있게 해보겠습니다. 오브젝트 {중첩그룹 : 시침}을 만들고 그 안에 시침 중 얇은 부분을 만들 {도형 : 얇은부분}을 만듭니다.

[모양]에서 <폭 : 4>, <높이 : 40>

[칠하기]에서 <색 : 계산기 - $if(si(darkmode)=1,gv(흑),gv(백))$>

[위치]에서 <하단 여백 : 50>으로 합니다.

이번에는 {도형 : 굵은부분}을 만들어 보겠습니다. {도형 : 얇은부분}을 복사, 붙여넣기하고 이름을 "굵은부분"으로 바꿔주겠습니다.

[모양]에서 <폭 : 10>, <높이 : 80>, <모서리 : 10>

[칠하기]에서 <색>은 {도형 : 얇은부분}을 복사했으므로 생략하겠습니다

[색보정]에서 <그림자 : 밖으로>, <흐림 : 1>, <방향 : 0>, <거리 : 0>, <색 : 계산기 - $if(si(darkmode)=1,gv(백),gv(흑))$> 여기서 그림자색은 원래색과 다르게 하여 부각되어 보이게 하는 효과이기에 다크모드일 때 흰색, 아닐 때 흑색으로 바꿔줬습니다.

[위치]에서 <하단 여백 : 120>으로 설정하였습니다.

이제 모양새가 시침 모양으로 되었습니다. 시간에 맞게 움직일 수 있게 설정해 보겠습니다.

{중첩그룹 : 시침}에서 [레이어]로 들어갑니다. <회전>을 누르면 팝업창이 뜨는데요, 시계 시침(정확하게)를 누릅니다. 여기서 시계 시침(정확하게)와 시계 시침(부드럽게)의 차이는 실제 아날로그시계와 같이 연속성을 갖고 부드럽게 움직이는 것을 시계 시침(부드럽게)라고 하고, 정확한 시침 눈금으로만 끊어지며 움직이는 것을 시계 시침(정확하게)입니다. 둘 중 원하는 것으로 고르면 됩니다.