썸네일 이미지는 AI를 활용했지만, 글은 모두 직접 작성했습니다.
🪄 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 요약은 MVP에서 우선 목데이터로 넣고, 나중 과제로 남겨두려고 한다.
그리고 개인적인 규칙이 하나 더 있다.
- AI에게 정답을 맡기지 않고, 공식 문서/실험/로그로 검증 해보겠다.
솔직히 AI가 너무 빨리 발전해서, 내 학습 속도가 느린 게 걱정이 된다. 하지만 장기적으로 AI를 잘 쓰는 기술을 키우기 위해서도 직접 설계하고, 좋은 코드가 무엇인지 구별할 수 있는 기본이 있어야 하기 때문에 내가 무엇을 모르고, 어떻게 확인하는지가 더 중요하다고 생각한다.
빠르게 디자인 시안 만들기 (Figma Make)
프론트 학습 외에 시간이 들어가는 부분은 최대한 아낀다. 기획을 시각화하는 디자인은 AI의 힘을 빌렸다.
Figma Make는 프롬프트 기반으로 아이디어/디자인을 작동 가능한 프로토타입/웹 앱/대화형 UI로 만들어보는 도구다. 나는 여기서 디자인을 완벽히 하는 것보다, 빠르게 화면 뼈대를 확보하는 게 목적이었다.
내가 만들 기능을 설명하고 구현해달라고 했고, 프롬프트 만드는 것도 AI를 활용하였다. 결과는 생각보다 그럴듯 했고, 반응형도 꽤 매끄럽게 만들어주었다.
아래는 그렇게 만든 디자인 시안과 각 화면별 과업이다.
메인 페이지
인트로 섹션, 실시간 인기 이슈, 내 관심 종목, 오늘의 인기 종목으로 구성된 메인 페이지이다.
- api를 통해 이슈/종목 목록을 가져와야 함
- 각 이슈 카드, 이슈 내 종목 버튼, 종목 클릭 시 상세로 이동해야 함
- 각 컴포넌트의 재활용성을 고려한 효율적인 분리 방식을 고민
이슈 상세
이슈를 눌러서 이동하는 상세 페이지이다. 이슈 요약과 관련 종목, 관련 뉴스를 표시하는 화면이다.
- 관련 종목 항목을 연결하여 표시해야 함 (몇 개까지 표시할지, 많아지면 어떻게 표현할지 고민)
- 관련 뉴스 정렬 방식, 무한 스크롤 표현 방식 고민
- (여력이 되면) 실제 이슈 뉴스 크롤링도 해보고 싶음 → 우선 지금은 스코프 아웃
주식 상세
주식 상세 페이지이다. 현재가, 1주/1개월 단위 가격 변동폭, 최저/최고 가격 등과 관련 뉴스를 표시하는 화면이다.
- 관련 뉴스 정렬 방식, 무한 스크롤 표현 방식 고민
- (여력이 되면) 차트/실시간 정보/타임라인/개인화 등 확장성이 넓은 화면 → 우선 지금은 스코프 아웃
뉴스 상세 모달
뉴스를 클릭하면 나오는 상세 모달 화면이다. 하단 버튼을 어떻게 구성할지, 어떤 기능을 넣을지는 아직 고민 중이다.
- 기사 원문 보기 표현 방식 고민 (새 탭 vs 모달로 처리)
- 모달 위에 토스트/다른 모달 뜨면 위계 표현 방식 고민
- 이전/다음 뉴스 이동을 제공할지, 애니메이션은 어떻게 할지 고민
지금은 Make로 만든 디자인 시안을 완벽하게 다듬기보다, 개발하면서 세세한 부분을 잡아나가려고 한다.
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
참고 링크
