실시간 주식 시세를 엑셀 인터페이스로 조회하는 도구 제작기

실시간 주식 시세 정보를 엑셀 같은 인터페이스로 조회할 수 있는 도구를 만들었다. 백엔드 API와 프론트엔드 페이지를 깔끔하게 분리해서 구성했는데, 이 과정에서 몇 가지 중요한 설계 결정들이 있었다.

실시간 데이터, 친숙한 인터페이스

팀에서 '주식 시세를 빨리 확인할 수 있는 도구'가 필요했다. 단순히 API 응답을 표로 뿌려주는 것도 방법이지만, 우리가 선택한 건 '엑셀처럼 보이는' 형태였다. 왜일까?

대부분의 비즈니스 팀이 엑셀에 익숙하니까다. 새로운 도구를 배우는 시간 자체가 비용이다. 하지만 엑셀처럼 셀 형태의 격자 인터페이스라면 클릭 한 번에 진입할 수 있다. 이건 단순 UX 선택이 아니라 도구의 채택율을 높이는 의도된 설계였다.

동시에 실시간 데이터라는 특성도 중요했다. 주식 시세는 변한다. 매번 새로고침할 때마다 최신 정보를 가져와야 한다. 이건 단순 정적 페이지가 아니라 주기적인 폴링이나 WebSocket 같은 구조를 염두에 두고 만들어야 한다는 의미였다.

API와 페이지의 명확한 분리

두 파일의 역할을 보자:

이런 분리는 중요한 이유가 있다:

• API는 독립적: 모바일 앱, 데스크톱 클라이언트, 다른 페이지에서도 같은 endpoint를 쓸 수 있다
• 페이지는 자유로움: API를 바꾸지 않고도 UI만 수정할 수 있다
• 테스트가 쉬움: API와 UI 로직을 따로 검증할 수 있다

quotes.ts가 API로 분리된 것은 처음부터 "이 데이터는 여러 곳에서 쓰일 거다"라는 판단이었다. 실제로 같은 시세 데이터가 대시보드, 알림, 리포트 등 여러 곳에서 필요할 가능성이 높으니까.

실제 개발할 때 염두에 둔 것

이런 식의 도구를 만들 때 팀원들과 나눴던 고민들:

• 폴링 vs WebSocket: 주기성과 레이턴시를 놓고 판단. 시세 정보는 1~5초 주기가 일반적인데, 간단한 구조면 폴링으로 충분하다
• 캐싱: API를 매번 호출할 순 없다. 주식 시세는 보통 지연 데이터(delay quote)를 쓰므로, 캐시 레이어를 어디 두고 TTL을 얼마로 할지가 중요
• 에러 처리: 시세 제공 서비스가 다운되면? UI는 "데이터 없음" 상태를 어떻게 표현할지 미리 정하는 게 낫다

Astro를 선택한 것도 고민의 결과였다. 이 페이지는 부분적으로 정적이면서도(레이아웃, 셀 구조) 실시간 데이터를 담아야 한다. Astro는 정적 생성 + 클라이언트 하이드레이션의 균형이 좋으니까.

다음은

다음 단계로 고려할 수 있는 것들:

• 사용자가 시세 정렬/필터링할 수 있도록 (엑셀처럼)
• 여러 종목 비교 기능
• 모니터링: API 응답 시간, 캐시 히트율 추적
• 비슷한 형태의 도구들(일정표, 재무 현황 등)과의 일관성 검토

단순해 보이는 한 기능이지만, "어떤 인터페이스로 제공할지", "어떻게 아키텍처할지" 같은 결정들이 쌓이면 결국 팀 전체의 개발 생산성과 사용자 만족도를 좌우한다.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 커피머신 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.