“나랑 별보러 가지 않을래~ 멋진 별자리 이름은 모르지만~”
그렇다. 우리는 밤하늘 별을 보며 감탄하지만
그게 어떤 별인지는 알아내기 힘들다.
저 별이 북두칠성이라니까?
그게 뭔데..
저거라고 저거!
네 시점에서 아무리 손가락으로 가리켜도 나는 모른다...
그리하여 준비했다. 언제든 누군가 달이 어디있냐고 물어본다면 밤에도 낮 에도 뒤 를 돌아 슬쩍 우리의 “PlanetFinder”를 가동시키고 대답해주자. 모두 당신에게 감탄하여 뒤로 쓰러질지도 모른다!
적당한 각도로 돌아가기 위해서는 스텝모터가 필요
영상 스트리밍을 위한 카메라
- 사용한 모듈
주황색- 라즈베리파이에 꽃은 핀이다
노란색- NASA에서 받아온 행성번호와 행성 이름들
시차가 다르니까 현재 자신이 살고 있는 지역을 알아야합니다.
overflow: hidden을 사용하여 이미지를 확대해도 이미지가
화면 밖으로 흘러나오는 일을 방지합니다.
img태그 src를 라즈베리 파이의 스트림 페이지로 설정하여 스트리밍화면을 볼 수 있도록 합니다
- 버튼이 아닌 이미지에 버튼 타입을 설정합니다.
노란색- onclick = "moveL()"을 작성하여 이미지를 클릭하면 moveL이라는 함수가 실행되도록 합니다.
이미지를 좌/우 이동시키는 함수
함수를 실행할 때마다 현재 이미지의 위치에서부터
왼쪽으로 50px 혹은 왼쪽으로 -50px 이동
이미지를 확대하는 함수
nwidth에 현재 이미지의 크기를 넣고, 함수가 실행될 때마다 현재 이미지의 크기를 1.5배로 확대
- Figma를 이용하여 전반적인 틀 잡기
- 웹과의 연동성을 위해서 Zeplin과 Figma를 연동
본화면 & 아이콘 & 제목
밤하늘을 바라보며 우리는 현실을 잊고 감상에 젖어듭니다.
처음 실행화면이 마치 도시가 꾸는 꿈이 밤하늘 같지 않나요?
도시의 야경은 누군가의 야근, 즉 고단함으로 이루워진 것입니다.
그런 사람들이 꿈을 이루고 도시의 별이 아닌 밤하늘의 별같이 반짝이길 바라며 디자인했습니다.
제목이 ‘밤하늘 길잡이’인 이유도 이와 일맥상통합니다.
밤하늘의 행성들을 찾아 준다는 기능적 의미도 있지만
도시의 밤하늘인 사람들이 고단함에 길을 잃지 않길 바란다는
의미도 있습니다.
본화면 & 실행화면
실행화면과 본화면 모두 동이 트는 듯한 분위기입니다.
해뜨기 전이 가장 어둡다고 하지요.
지금까지의 힘듦을 해뜨기 전의 어두움으로 생각하길 바래서
동이 트는 듯한 그라데이션을 넣었습니다.
다만 실행화면은 스트리밍화면이 밤하늘 이기에 몰입할 수 있고자
좀 더 어두운 보랏빛으로 디자인했습니다.
- 아름다운 앱 디자인과 라즈베리파이로
밤하늘의 경치를 즐겨보세요... ㅎㅎ
