JavaScript 3

[Midnight 스터디 카페 #7] 음원 파일 없이, 코드로 빗소리와 재즈를 만들다

비 오는 밤 카페인데, 빗소리가 없었다기능은 꽤 갖춰졌습니다. 앉아서 공부하고, 원두를 벌고, 음료를 사고, 옆에 사람이 있어요. 그런데 어느 날 화면을 한참 보다가 이상한 위화감이 들었습니다. 이 게임, 소리가 하나도 없었어요.비 내리는 밤의 카페를 만든다면서 빗소리 한 방울이 안 났습니다. 차분한 재즈가 깔린 공간을 그린다면서 정작 정적만 흘렀고요. 눈으로는 밤인데 귀로는 아무 데도 아니었던 거죠. 분위기가 곧 상품인 서비스에서 이건 꽤 큰 구멍입니다.음원을 넣기 싫었던 이유가장 쉬운 답은 음원 파일을 사서 넣는 겁니다. 빗소리 mp3 하나, 로파이 재즈 루프 하나. 그런데 그러기가 싫었어요. 이유가 몇 개 있었습니다.첫째, 저작권입니다. 나중에 앱으로 팔 생각이라면 배경음악 라이선스는 계속 발목을 ..

[Live MetroCare 개발기 ②] 서울 API 뚫기 — CORS 벽, 엘리베이터 데이터 866개 pre-bake, 최적 환승 알고리즘

시리즈 : Live MetroCare 개발기1편 보기 : https://programi.tistory.com/19GitHub : (링크 추가 예정)이번 편에서 다룰 것1편에서 전체 아키텍처를 잡았다면, 2편은 실제로 가장 오래 막혔던 두 가지 문제를 파고든다.서울 Open API 연동 + CORS 지옥 — 실시간 혼잡도, 다음 열차 정보를 어떻게 브라우저에서 호출했나최적 환승역 알고리즘 — "첫 번째 환승역"이 아니라 진짜 시간이 가장 짧은 환승역을 고르는 방법🗺️ 서울 열린데이터광장 API이 앱에서 사용한 API는 총 3가지다.API용도주소realtimePosition열차 실시간 위치 + 혼잡도swopenAPI.seoul.go.krrealtimeStationArrival역별 다음 열차 도착 정보swo..

웹 개발 2026.06.23

[Live MetroCare 개발기 ①] 실시간 서울 지하철 앱 만들기 — 기획과 아키텍처

시리즈 : Live MetroCare 개발기스택 : Vanilla JavaScript (ES6 Modules) · HTML5 · CSS3 · 서울 열린데이터광장 API왜 만들었는가지하철을 타면서 항상 같은 고민을 반복했다."지금 어느 칸이 제일 덜 붐빌까?""환승할 때 어디로 나가야 계단이 제일 가까울까?""엘리베이터 타려면 몇 호차 타야 하지?"네이버 지도, 카카오 지하철 같은 앱도 이 정보들을 흩어서 보여주거나 아예 없다. 대학교 웹 서비스 개발 과제를 앞두고, 이걸 한 화면에 통합해서 보여주는 앱을 만들어보기로 했다.이름: Live MetroCare요구사항 정리 — "누가 쓸 것인가" 부터기능 목록을 나열하기 전에 사용자를 먼저 상상했다.출근 5분 전, 빠르게 결과를 봐야 하는 직장인엘리베이터가 꼭..

웹 개발 2026.06.08