🪄 TL;DR
- 주식 초보를 위한 핵심 이슈와 종목 맥락을 빠르게 훑는 Stock-Lens 서비스를 만들어보려고 한다.
- React와 TypeScript를 학습하며 프론트 개발 프로세스를 프로젝트로 겪어보는 것이 목적이다.
- 이번 프로젝트에서 특히 중점적으로 구현해보고 싶은 건 모달 + 무한 스크롤 두 가지다.
- Figma Make로 빠르게 디자인 시안을 만들고, 기술 스택은 Node.js, pnpm, React + Vite + TypeScript를 이용했다.
왜 이 프로젝트를 시작했나
주식을 잘 모르지만, 알음알음 공부해가며 투자를 시작했다. 투자에 관심을 가질수록 사회 이슈 전반에 계속해서 관심을 가져야겠다고 느꼈다. 하지만 매번 일일이 기사를 찾아보고 맥락을 이해하는 게 생각보다 어려웠다. 모르는 단어가 너무 많았고, 새로운 이슈를 이해하기 위한 배경 지식이 부족했다.
나 같은 초보를 위한 ‘이슈 요약 + 종목 연결’ 서비스가 필요하다고 느꼈다.
그리고 개인적으로는 리액트를 연습해보려는 목표로 프로젝트를 시작하게 되었다. 나는 리액트를 이제 막 공부 중인 주니어 개발자다. 개념은 읽었지만, 아직 손으로 만들면서 체득한 경험이 부족하다. 그래서 관심 있는 주제로 서비스를 직접 만들어보며, 리액트를 연습해보기로 했다.
이 시리즈의 목표는 그럴듯한 결과물보다, 내가 실제로 프로젝트를 만들며 마주치는 고민과 실패를 가감없이 기록하는 것이다.
Stock-Lens
내가 만들고자 하는 서비스의 이름은 Stock-Lens이다. 한 줄로 설명하자면 이슈를 통해 주식 흐름을 이해하는 주식 뉴스 네비게이터 서비스다.
- 오늘의 주요 이슈를 빠르게 탐색하고, 영향을 받는 종목을 살핀다.
- 종목을 기준으로, 어떤 이슈가 있고 어떤 영향을 받았는지 빠르게 훑는다.
정교한 분석보다는 빠르게 맥락을 파악할 수 있도록 돕는 게 목표이다.
핵심 구현 목표 2가지
복잡한 서버 연결과 화려한 기능 구현보다는, 기본에 충실하여 구현해보고자 한다. 이번 프로젝트에서 특히 구현해보고 싶은 핵심 기능은 두 가지다.
1. 모달
상세 뉴스를 모달로 보여주는 흐름을 만들려고 한다. 단순히 모달을 화면에 띄우는 것 뿐만 아니라 아래 같은 고민들에 실제로 부딪혀보려고 한다.
- 링크로 띄우기 vs 링크 변동 없이 띄우기
- 모달에서 새로운 링크로 넘어갈 때 동작 처리 (뒤로가기, 앞으로가기 포함)
- 모달에서의 상호작용 (닫기, 스크롤, 포커스 등)
- 모달 위에 다른 모달이 겹칠 때 위계 처리
우선 기본적으로 뉴스 모달을 열고 닫고, 기본 동작이 깨지지 않게 하는 게 첫 번째 목표이다.
2. 무한 스크롤
리스트가 길어질 때 자연스럽게 계속 로드되는 무한 스크롤을 구현해보려고 한다. 단순히 계속 나오는 것을 넘어서 실제 구현에서 신경 써야 하는 부분은 어떤 게 있는지 경험해보고 싶다.
- 요청이 길어질 때 로딩을 어떤 방식으로 표시할지
- 무한 스크롤 시 스크롤 위치를 어떻게 유지할지
- 반응형에서 스크롤 기준을 어떻게 잡아야 하는지
- (이미지가 포함될 경우) 이미지 크기가 다를 때 레이아웃을 어떻게 구성할지
MVP 플로우
조회 위주의 심플한 서비스인만큼, 내가 생각한 MVP 플로우는 아래와 같다.
- 오늘의 주요 이슈 확인
- 관련 종목 확인
- 관련 뉴스를 통한 맥락 파악
핵심 이슈를 종목과 연관해 확인하며 주식 흐름을 바라보는 시야를 넓힐 수 있도록 한다.
학습 규칙
학습하다가 다른 길로 빠지지 않도록 학습 규칙도 정해보았다.
- 백엔드 없이 목데이터로 최대한 간단하게 구현하기
- 운영, 배포, 테스트, 모니터링은 우선 패스
- 크롤링, AI 요약, 차트도 해보고 싶지만 욕심을 버리고 핵심 기능 먼저
- AI에게 정답을 맡기지 않고, 직접 시행착오 겪으며 공부하기!
솔직히 AI가 너무 빨리 발전해서, 이렇게 직접 시행착오를 겪으며 학습하는 게 너무 느린 게 아닌가 하는 불안한 마음이 들기도 한다. 하지만 장기적으로 AI를 잘 쓰기 위해서도 직접 설계하고, 좋은 코드가 무엇인지 구별하는 경험이 결국 기본기가 된다고 생각하기 때문에 내가 무엇을 모르고, 어떻게 확인하는지를 직접 찾아가며 공부해보도록 하겠다.
빠르게 디자인 시안 만들기 (Figma Make)
프론트 학습 외에 시간이 들어가는 부분은 최대한 아끼기 위해, 기획을 시각화하는 디자인은 AI의 힘을 빌렸다.
Figma Make는 프롬프트 기반으로 아이디어를 작동 가능한 프로토타입으로 빠르게 만들어주는 도구이다. 나는 여기서 디자인을 완벽히 하는 것보다, 빠르게 화면 뼈대를 확보하는 게 목적이었다.
내가 만들 기능을 설명하고 구현해달라고 했고, 프롬프트 만드는 것도 AI를 활용하였다. 결과는 생각보다 그럴듯 했고, 반응형도 꽤 매끄럽게 만들어주었다. 그렇게 만든 디자인 시안과 각 화면별 과업을 정리해보았다.
메인 페이지
인트로 섹션, 실시간 인기 이슈, 내 관심 종목, 오늘의 인기 종목으로 구성된 메인 페이지이다.
- api를 통해 이슈와 종목 목록을 가져와야 함
- 각 이슈 카드, 이슈 내 종목 버튼, 종목 클릭 시 상세로 이동해야 함
- 각 컴포넌트의 재활용성을 고려한 효율적인 분리 방식을 고민해야 함
이슈 상세
이슈를 눌러서 이동하는 상세 페이지이다. 이슈 요약과 관련 종목, 관련 뉴스를 표시하는 화면이다.
- 관련 종목 항목을 연결하여 표시해야 함 (몇 개까지 표시할지, 많아지면 어떻게 표현할지 고민)
- 관련 뉴스 정렬 방식, 무한 스크롤 표현 방식 고민
- (여력이 되면) 실제 이슈 뉴스 크롤링도 해보고 싶지만 우선 지금은 패스
주식 상세
주식 상세 페이지이다. 현재 가격, 1주 · 1개월 단위 가격 변동폭, 핵심 이슈 요약, 최저 · 최고 가격, 관련 뉴스를 표시하는 화면이다.
- 관련 뉴스 정렬 방식, 무한 스크롤 표현 방식 고민
- (여력이 되면) 차트, 실시간 정보, 타임라인, 개인화 등 붙일 수 있는 기능이 많을 것 같은 화면이지만 우선 지금은 패스
뉴스 상세 모달
뉴스를 클릭하면 나오는 상세 모달 화면이다. 하단 버튼을 어떻게 구성할지, 어떤 기능을 넣을지는 아직 고민 중이다.
- 기사 원문 보기 표현 방식 고민 (새 탭 vs 모달로 처리)
- 모달 위에 토스트 또는 다른 모달 뜨면 위계 표현 방식 고민
- 이전 / 다음 뉴스 이동을 제공할지, 애니메이션은 어떻게 할지 고민
Figma Make를 쓰면서 느낀 점은 이렇다.
- 좋았던 점: 머릿속 이미지를 화면으로 확인할 수 있고, 글이 아닌 그림으로 뼈대를 잡을 수 있다. 빠르게 프로토타입 확인이 가능하다.
- 아쉬운 점: 의도와 다르게 나왔을 때 수정이 번거롭다. (역시 디테일하고 명확한 프롬프팅이 중요하다) 무료 버전을 사용하여 AI 사용량 제약이 체감된다. inspect처럼 수치를 바로 확인하여 사용하기 불편하다.
가장 막막한 고민들
사실 온전히 개발을 혼자 진행하며 프로젝트를 진행하는 게 처음이다 보니 걱정되는 부분이 많다. 그중 가장 막막하게 느껴지는 건 아래 부분들이다.
- 데이터를 만들고 연결해서 가져오기 (API 호출)
- 상태 관리를 어디서 어떤 기준으로 할지 (로딩, 에러, 취소 등 예외 케이스 처리)
- 컴포넌트를 얼마나 쪼개고 어떻게 구성할지
퍼블리셔로서의 작업 방식 때문에 스타일 표현에만 치우치지 않도록, 설계 · 네트워크 · API 호출 · 리액트 훅 · 상태관리 같은 프론트 기본기를 쌓는 데 집중하려고 한다.
모르는 게 무지 많다. 시리즈가 길어질 수 있다. 하지만 모르는 건 그때그때 파고들면서, 개발 실력을 무럭무럭 성장시켜보려고 한다.
기술 스택
이번 프로젝트의 기술 스택은 다음과 같다.
Node.js, pnpm
npm 대신 pnpm을 사용했다. 패키지 매니저 비교 글을 살펴보며 설치 속도와 디스크 효율 측면에서 pnpm의 장점에 공감했기 때문이다. 사용법은 pnpm 공식 문서를 참고하면 된다.
React + Vite + TypeScript
React + TypeScript는 이번 프로젝트의 핵심 학습 목표이다. 번들러와 개발 서버는 Vite로 시작한다.
React에서는 최근 CRA(Create React App)가 지원 종료 되었고, 새 프로젝트는 Vite 같은 빌드툴을 고려하라고 안내하고 있다. 그 흐름을 따라 React + Vite + TypeScript 구성으로 프로젝트를 구성하였다.
# React + TypeScript 템플릿으로 Vite 프로젝트 생성 (pnpm)
pnpm create vite stock-lens --template react-ts
cd stock-lens
pnpm install
pnpm dev이 시리즈의 기록 방식
단순히 공식 문서를 요약하거나 정보를 정리하는 글보다, 직접 겪고 느낀 과정을 기록하고자 한다.
'문제 → 가설 → 실험 → 결론'의 큰 흐름을 거치며, 실제로 경험한 증거를 남기려고 한다. (화면 스크린샷, DevTools 네트워크 로그, 에러 로그, 코드 / 커밋 링크 등)
맨 땅에 헤딩하며 배우는 주니어 프론트엔드 개발자의 실수와 성장기를 보며, 누군가에게 도움이 되길 바란다. 그리고 스스로에게도 작은 발자취를 만들어가려고 한다.
다음 글 예고
다음 글에서는 FSD로 기본 폴더 구조를 잡는 과정을 담아보려고 한다. 원래 프로젝트 시작과 동시에 글을 남겨두고 싶었는데, 정신없이 진행하다 보니 글 작성이 늦어져버렸다.
현재 진행중인 프로젝트의 깃 링크는 아래에서 확인할 수 있다.
https://github.com/jjipper/stock-lens.git
참고 링크
