기획부터 프론트엔드 디자인까지, 나만의 경제 뉴스 대시보드 만들기 (Claude Code + Google AI Studio)

정정현지2026. 3. 31.조회 1

😫 문제 상황 (Before)

아침 루틴 관리하는 앱을 만들기로 하고, 이를 구체화하는 과정에서 다시 기획부터 시작했습니다. 아침마다 뉴스를 읽어야겠다는 마음은 있었지만, 매번 실패했습니다. 읽어야 할 기사와 뉴스레터가 너무 많고, 읽어도 내 삶과 어떤 관련이 있는지 와닿지 않으니 흥미를 못 붙였어요. 경제 공부를 해야겠다는 생각도 계속 있었지만 미루고만 있었고요.

한편으로는 AI 도구로 뭔가 직접 만들어보고 싶다는 욕구도 있었습니다. 그러던 중 thinking-partner 기능으로 아이디어를 발전시키다 보니, "이걸 진짜 만들어보자"라는 결심이 서게 됐어요.

🛠️ 사용한 도구

  • Claude Code: 기획 단계 (요구사항 도출, 기획 문서 작성, 데이터 소스 분석)

  • Google AI Studio (Gemini 3.1 Pro Preview): 프론트엔드 디자인 + 구현

  • 모델: Claude Opus 4.6 / Gemini 3.1 Pro Preview

🔧 작업 과정

AI에게 질문받으며 아이디어 구체화하기

처음에는 그냥 막연하게 "아침에 뉴스 읽기가 어렵다"는 생각뿐이었어요. Claude Code에는 Thinking Partner라는 기능이 있는데, AI가 답을 주는 게 아니라 질문을 해주는 모드입니다.

새로운 프로젝트를 시작하자. 내가 아침마다 뉴스 기사를 읽는 데에 어려움이 있어

이렇게 시작했더니, AI가 "구체적으로 어떤 어려움인가요?", "뉴스를 읽는 데 하루에 얼마나 쓸 수 있나요?" 같은 질문들을 단계적으로 던져줬어요. 대답하다 보니 내가 진짜 원하는 게 뭔지 정리가 되더라고요.

읽어야 할 기사나 뉴스레터 등 리소스가 너무 많고, 내 삶에 어떤 영향이 있는지 그려지지 않으니까 흥미를 못 붙이는 것 같아.

시의성 높은 내용과 기초적인 경제 개념을 함께 엮어서 공부할 수 있었으면 좋겠어.

이런 식으로 대화를 주고받으면서, "뉴스 × 경제 개념 × 내 삶"을 연결하는 AI 대시보드라는 아이디어가 나왔어요. 매일 30분 / 처음 5분은 요약 훑기 → 10분은 기사 읽기 → 15분은 개념 학습하는 방향으로 추려졌구요. 혼자 고민했으면 이렇게 구체적인 형태까지 도달하기 어려웠을 거예요.

데이터 소스 정하고, 기획 문서 완성하기

아이디어가 구체화되자 Claude Code에게 실제 뉴스 데이터 소스를 분석해달라고 했어요. KCIF(국제금융센터)에서 매일 발행하는 국제금융속보 PDF를 기본 소스로 정하고, Bloomberg/NYT 외신을 보충 소스로 결정했습니다. 경제 개념 설명은 금감원에서 발행한 「대학생을 위한 실용금융」 교재를 기반으로 하기로 했고요.

여기서 핵심은, 이 모든 내용을 IPO 기획 템플릿이라는 구조화된 문서로 정리한 겁니다. 지금까지 대화한 내용을 토대로 스터디장님이 공유해주신 IPO-Webpage-Plan-Template.md을 채워달라고 요청하니, 순식간에 기획서가 완성되었습니다.

IPO란 Input(요구사항) → Process(설계) → Output(기능 명세)의 약자인데, Claude Code가 대화에서 나온 모든 내용을 이 틀에 맞춰 정리해줬어요. 타겟 사용자, 핵심 가치, 페이지 구조, 컴포넌트 목록, 4주 작업 계획까지 한 문서에 담겼습니다.

이 문서가 다음 단계에서 엄청난 역할을 하게 됩니다.

기획 문서 하나로 프론트엔드 한 번에 만들기

기획 문서가 완성되자, Google AI Studio로 넘어갔습니다. AI Studio에 이 IPO 기획 문서를 통째로 첨부하고, 간단한 지시를 더했어요.

경제 뉴스를 매일 자동 수집해서, AI가 경제 개념과 내 삶과의 연결을 설명해주는 아침 뉴스 학습 대시보드 웹사이트를 만들어줘.

콘텐츠 내용 및 전체 요구 사항 정의: IPO-Webpage-Plan.md

컬러셋: 깔끔한 모노톤

컬러셋의 경우, 뉴스 기사 대시보드인 만큼, 너무 화려한 톤은 원치 않아 깔끔한 모노톤으로 요청해봤습니다.

결과는 생각보다 한 번에 괜찮게 나와서 놀랐어요. 약 10분 만에 대시보드 홈 화면, 기사 상세 페이지, AI 채팅 패널까지 전부 생성됐습니다. 깔끔한 모노톤 스타일이 바로 잘 반영됐어요.

한국 뉴스위크 홈페이지 화면 캡처

이후에 세부 수정도 했는데, AI Studio의 Focus 지정 기능이 편리했습니다. 수정하고 싶은 UI 요소를 화면에서 바로 지정해서 "이 부분 이렇게 바꿔줘"라고 말할 수 있거든요.

터미널 CLI에서 작업할 때에는 매번 스크린샷을 첨부해가며 '여기 고쳐줘'라는 식으로 수정해야 했는데, 시각적으로 바로 디자인이 보이고 수정을 요청할 수 있으니 정말 편하다고 느꼈어요.

수정한 것들:

  • 폰트를 Pretendard로 통일, 로고만 Serif 유지

  • 더미 기사 데이터 보강 (이건 전체 기사 목록 더 보여달라고 했더니, 알아서 더미 데이터를 추가하더라구요 😅)

  • "맥락 수정하기" 버튼에 편집 모달 추가

  • 마크다운 파일 업로드 시 AI가 학습 맥락을 자동 요약하는 기능 추가

완성된 결과물은 AI Studio에서 바로 GitHub으로 push했습니다.

Claude Code로 돌아와 마무리

GitHub에 올라간 코드를 로컬로 가져와서, Claude Code로 후속 작업을 이어갔어요. 기존에 작업해둔 기획 문서와 참고 자료(KCIF PDF, 교재 등)를 GitHub 리포와 합치는 작업을 진행했습니다.

결과물

  • 기획 문서: IPO-Webpage-Plan-Template.md

  • 프론트엔드: Next.js + Tailwind CSS 기반 대시보드

  • GitHub (링크는 비공개하겠습니다!)

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

  1. 구조화된 기획 문서를 AI에게 넘기면 결과물 퀄리티가 확 올라간다. IPO 템플릿에 타겟 사용자, 페이지 구조, 컴포넌트 목록까지 정리해서 넘겼더니, AI가 의도를 정확히 파악하고 한 번에 원하는 결과를 만들어줬어요.

  2. 기획은 대화형 AI, 디자인/구현은 비주얼 AI로 역할을 나눠라. Claude Code는 대화를 통해 생각을 정리하고 문서를 만드는 데 강하고, Google AI Studio는 화면을 바로 보면서 UI를 수정하는 데 강해요. 각 도구의 장점을 살려서 조합하면 효율적입니다.

이렇게 하면 안 돼요

  1. 아이디어를 구체화하지 않고 바로 "만들어줘"라고 하면, AI도 막연한 결과물을 내놓습니다. 기획 단계를 충분히 거치세요.

  2. 하나의 AI 도구로 모든 걸 하려고 하기보다, 단계별로 적합한 도구를 쓰는 게 낫습니다.

🚀 앞으로의 계획

  • 더미 데이터 대신 실제 KCIF 뉴스 크롤링 연동

  • AI 대화 기능 완성 (Claude API 연결)

  • 전체적으로 다듬어서 배포까지 완료하기 (Vercel 배포)

댓글 0개

로그인하고 댓글을 작성하세요

기획부터 프론트엔드 디자인까지, 나만의 경제 뉴스 대시보드 만들기 (Claude Code + Google AI Studio) | GPTers