다음 그림에서 처럼 자신이 코딩한 나침판 앱 결과와 플레이스토어에서 다운 받을 수 있는 무료 나침반을 다운 받아 비교해 보자. 

![noname01.png](https://cdn.steemitimages.com/DQmSsx3nsfhhVSZJW2WMFP4AdoaeiCSx4EapCjWxndJbdtR/noname01.png)
스마트폰 화면에서 바늘이 실시간으로 움직이는 나참판을 앱인벤터로 코딩해 보자. 물론 Play ㅅ토어에 들어가면 무료 나참판이 흔하긴 하지만 스스로 코딩할 수 있느냐의 문제는 도전감에 불을 지를 수도 있는 충분한 동기가 될 것이다. 별도의 재료를 준비할 필요도 없는 간단하면서도 흥미로운 코딩을 경험해 볼 수 있다. 

앱인벤터의 방향센서(Orentation Sensor)를 사용하여 지구자기장 N극을 찾아주는 나침판 앱을 구성해보자. 방향센서는 팔레트의 Sensors에서 찾을 수 있다. 

그 외에 나침판 구성에 필요한 컴포넌트는 팔레트의 Drawing and Animation의 Canvas 하나와 ImageSprite 하나이다.

![noname02.png](https://cdn.steemitimages.com/DQmPawEWM9Pe3xVJQd1qz125sRPAU1u2Jtt1aPR7Yvt9Xf1/noname02.png)

Canvas는 고정된 나참판의 바닥 판을 뜻하는데 Canvas 가 정의 되어야 그 위에서 가늘게 그린 바늘 침 즉 imageSprite이 회전하게 된다.
ImageSprite 그림 파일은 인터넷에서 그림 파일을 구해와도 되지만 그림판에서 직접 화면과 같이 그려서 확장자 png 파일로 저장해 두었다가 업로드 하도록 하자. 

![noname03.png](https://cdn.steemitimages.com/DQmaLBhgwvBzgmsapSp7yCzZtZg9sMN1WZLqr39swQW6mw8/noname03.png)

그림파일 업로딩은 ImageSprite 속성 창에서 Picture박스에서 업로딩해야 한다.

![noname05.png](https://cdn.steemitimages.com/DQmaZ5uJ2wHgAotz7e3oDi8tTTgobqpVLRaWsdsFtiS3xQ5/noname05.png)

디자이너에서 블록 편집단계로 넘어가도록 하자. 
스마트 폰이 평면상에서 회전하여 움직이게 되면 Orientation 센서 값이 민감하게 변하게(Changed)된다.

![noname04.png](https://cdn.steemitimages.com/DQmdHUeUPVPKJK1crfaai7TJLi9u35VcwpxPrEaUjnyfQid/noname04.png)

imageSprite 파일이 회전해서 그림의 나침판 침이 azimuth 즉 방위각 방향을 지시해야 (Heading) 한다. 이로서 블록 편집 단계의 퍼즐 코딩이 완료되었다.

디자이너로 돌아와서 작성한 앱인벤터 파일을 저장하고 QR 코드를 스캔하여 실행해 보자.