[KOSTA] javascript 기반 풀스택 과정 - 앱인벤터 (2)

U U·2025년 2월 25일

[ KOSTA ]

목록 보기
2/9

요즘 앱인벤터로 만드는 개인 프로젝트를 하느라 오랜만에 글을 쓴다.

전에 말했다시피 앱인벤터는 사실상 스크래치인데, 생각보다 지원되는 기능이 많았지만 이게 안된다고? 싶은 점들도 많았다.
꽤 고생을 하긴 했는데 사실 기능 구현보다는 디자인이 내 마음대로 안되었던 게 더 크다.

어찌됐든 잘 마무리 해서 여기에도 올려본다.


보고 달리자

개요

다들 살면서 한번쯤은 열심히 뛰어왔지만 지하철을 놓친 경험이 있을 것 아닌가. 나도 그런 경험 정말 많았다. 기껏 헉헉거리며 뛰어왔더니 눈 앞에서 문이 닫히는 그 절망감...

이 경험에 착안하여 현재 열차 상황을 보고 뛸지 말지 결정할 수 있는 앱을 만들어보자라는 계획이 세워졌다.

구상

우선 지하철 도착 정보를 데이터가 있어야 뭘 만들거나 말거나 할 거 아닌가.

https://data.seoul.go.kr/dataList/OA-12764/A/1/datasetView.do

그래서 있는 것이 바로 공공데이터이다.

감사하게도 서울시에서 지하철 실시간 도착정보를 무료로 활용할 수 있게 해주셨다.

그리고 여기서 우리가 유심히 봐야할 데이터는 바로 도착 메세지이다.


샘플 데이터를 보면 알 수 있지만, 별 다른 처리를 해주지 않아도 이 메세지 하나에 우리가(혹은 내가) 알고 싶어하는 정보가 담겨져있다.

이걸 이용해서 현재 역에서 가장 가까운 열차, 그 다음으로 가까운 열차의 정보를 표시하면 된다.

디자인

완성된 앱의 디자인이다.

여러 개로 늘려놓았지만 사실상 스크린은 하나이다. 한 화면에서 모든 기능이 동작한다는 뜻이다.

앱의 UI를 구상하면서 참고한 레퍼런스이다.

기능

기능은 총 4가지로 이루어져있다.

  1. 현재 역과 가장 가까운 열차와 그 다음 열차의 상태
  2. 역명 검색
  3. 환승역 이동
  4. 즐겨찾기

열차 상태

말 그대로 현재 역과 가장 가까운 열차와 그 다음 열차가 어디에 있는지 알려준다. 이미 해당 역에 도착했을 경우, 붉은색으로 바뀌도록 했다.

역명 검색

원래는 검색 할 때, 노선을 텍스트가 아닌 이미지로 보여주고 싶었지만 앱인벤터에서 목록버튼은 커스텀이 안되고, 그 외의 확장기능을 찾지 못해서 불발되고 말았다. 이게 제일 아쉬웠던 점

환승역 이동

api를 받아올 때, 환승 노선이 있는 경우 subwayId라는 태그에서 지하철호선ID를 여러 개 준다. 이걸 이용해서 7호선 가산디지털단지역에서 1호선 가산디지털단지역으로 이동할 수 있었다.

즐겨찾기

최대 5개 즐겨찾기 지정을 할 수 있게 해놓았다. 그리고 즐겨찾기가 있을 경우 앱을 기동시킬 때, 제일 첫번째로 지정한 역의 정보를 보이도록 설정해놓았다.

왜 이 앱을 사용해야 하는가

보고 달리자를 사용하면 얻을 수 있는 효과이다. 이 앱을 통해서 조금이라도 체력소모를 덜 하자는 기대를 가지고 있다.

느낀점

설마 앱인벤터로 api를 사용할 수 있을까 했는데 됐다는게 신기하다. 정녕 이게 애들용 교육 프로그램이 맞는 것인가...

어쨌건 만드는 동안 재미 있었다. 다른 사람들도 만든 거 보면 신기한 게 많았다. 다들 아이디어가 넘쳐서 부러웠다.

사용해보기

보고 달리자 다운로드

혹시나 궁금해 할 사람을 위해서 다운로드 링크를 남겨놓는다.

profile
언제까지 할 건데

0개의 댓글