Digital Watch sample을 이용한 나만의 Watch 만들기 (1/2)

정~~~~말 오랜만에 Tizen 관련 글을 작성하는 것 같다.

음...

그렇게 바쁜 것은 아니었지만,

나름 이유?가 있었다.

그것은 바로,,, 

Tizen 2.5 SDK mac OS emulator에서 앱 설치를 비롯하여 여러가지 동작이 잘 되지 않았다.

하지만, 현재 2.4 SDK를 update 해주니 잘 동작한다. 

앱도 설치가 잘되고, 그래서 드디어 나의 포스팅을 다시 시작할 수 있게되었다!

이 번 Digital Watch 시리즈는 총 2편으로 연재할 생각이다.

1편에서는 배경화면을 바꾸는 것을 설명하고,

2편에서는 안의 내용물을 바꾸는 것을 설명하고자 한다.

그리고 Digital Watch 시리즈는 이름이 Digital Watch 시리즈인 만큼,

Digital Watch Sample Project를 그대로 이용하여 진행할 것이다.

혹시라도 샘플앱을 어떻게 실행시키지 못하는 분들은 구글에 찾아보면 많은 글들이 있을 것이니,

쉽게 찾을 수 있을 것이다.

(아니면 나중에 내가 작성해서 올리는 걸로...ㅠㅠ)

그럼 먼저 Digital Watch는 어떻게 생겼는지 확인해보자.

굉장히 심플한 모습을 한 것을 볼 수 있다.

배경화면 바꾸는 것 또한 굉장히 심플할 것이다.

어떤 사진으로 배경을 바꿔볼까?

라고 고민하다가, 아직도 나는 스웨덴 여행에서 못 빠져 나왔기에 스웨덴 사진 중 하나를 선택하기로 했다.

여러분들도 바꾸고 싶은 사진 한 장을 선택해 봅시다.

정사각형 비율 이면 더 좋겠지만, 일단 시험삼아 아무 사진을 가져와도 좋겠다.

<누군가가 굉장히 좋아하는 플래쉬 사진!!>

사진에 대한 설명은 혹시라도 궁금하신 분들이 있을까봐서 위에 이렇게 적었다.

없을 것 같긴 하지만 ㅠㅠ

그 다음 프로젝트 내 images 폴더 안으로 쏙 복사를 해준다.

나는 기본 이미지와 비교하기 위해 prefix로 "my_"를 붙여 주었다.

보통 image resource들은 이와같이 image directory를 따로 생성하여 관리하는 것이 편하다.

그 다음,

style.css을 열어 아래와 같이 한가지만 바꿔주면 된다.

body element에 대한 background image를 '/images/my_bg.jpeg' 의 경로로 지정하겠다는 뜻이다.

그리고 한 가지 더!! 바꿔줘야 할 것이 있다.

main.js 내에서 initDigitalWatch() function에서 경로도 바꿔줘야 한다.

initDigitalWatch() function은 ambient mode 때문에 만들어진 함수이다.

ambient mode(always on)에 대해서는 다시 다룰 것이다.

그럼 이렇게 하고 시계가 어떻게 나오는지 확인해보자.

그럼 이렇게 짜잔!!!하고 플래쉬가 배경화면으로 바뀐것을 볼 수 있다.

근데 어떻게 사진의 크기가 다를 것인데 이렇게 알맞은 사이즈가 배경으로 들어갈 수 있었을까?

그 이유는 css에서 background 관련하여 몇가지 설정을 해 주었기 때문이다.

바로 아래 빨간 박스에 있는 두가지 속성이다.

backgound-size 를 통해서 해당 이미지를 늘이거나 줄일 수 있다.

지금과 같이 100%는 해당 element사이즈와 동일하게 하겠다는 뜻이다.

조금 더 자세한 설명은 아래의 모질라 재단에서 설명한 주소를 참조하자.

배경 이미지 크기 조정하기 -  CSS | MDN

background-repeat은 background 이미지를 반복하여 화면에 나타내는 것에 대해 지정하는 속성이다.

지금과 같이 no-repeat 으로 하면 이미지를 화면에 한 번만 출력한다.

그럼 예를들어 지금 속성값을 바꿔본 결과를 보도록하자.

background-size는 80% (body 영역의 80%의 사이즈로 이미지를 줄임),

background-repeat은 지워보겠다.

그럼 이러한 결과가 나온다.

이 속성은 배경이미지를 사용할 때 아주 유용하게 사용될 속성들이니 잘 기억하자!

마지막으로, 주의할 점은 저 플래시 사진처럼 인터넷에서 이미지들을 마구잡이로 사용하여 앱을 만든 후 스토어에 배포하면 안된다.

대부분의 이미지에는 저작권이 있기 때문이다.

(이미지에 대한 저작권으로 인해 불상사가 발생하지 않기 위해서는 꼭 사용가능한 이미지 혹은 직접 제작하여 사용하여야 한다!)

나는 

http://newspaper.neisd.net/macarthur/2016/03/11/frankly-speaking-zootopia-review/

이 곳에서 사진을 가져와서 잠시 이용했다.

추가로 사진에 대한 정보는 아래와 같다.

Photo by www.midcoastrecord.com

자, 다음 시간에는 배경 화면과 어울리도록

글자의 색깔이나 크기 배치 등을 바꿔보는 것을 해보도록 할 것이다.

또한 자신이 만든 것을 직접 기기(Gear S2)에 넣어 보고 싶은 분들은 조만간 포스팅을 할 예정이니

저에게 시간을 주시길.....ㅠㅠㅠ

라고 위에 작성 했었고,

드디어 포스팅을 작성했다. 이제 자신이 원했던 배경으로 바꾼 시계를 직접 디바이스에 넣어볼 수 있다.

아래 링크를 참조 하십쇼!

Gear S2 SDK와 연동하기 (http://hangle.tistory.com/134)

그럼 오랜만에 작성하는 타이젠 글을 마무리 하도록 하겠다.