3편: 코딩 초보도 가능할까? React와 Lovable로 자산 관리 웹앱 런칭한 후기 (개발 스택 공유)

관련 글 1: https://shinypeace.tistory.com/14

1편: 사회초년생 재테크, 막막하다면? 내 돈을 지켜주는 '로보 자산 멘토' 개발기

 

 

 

관련 글: https://shinypeace.tistory.com/15

 

 

안녕하세요!

그동안 간단한 웹 프로젝트를 만들어보는 이야기를 연재했었는데, 드디어 제가 혼자서 고민하고 기획한 실생활 프로젝트 '로보 자산 멘토' 를 세상에 내놓게 되었습니다.

이전 1편에서는 왜 이런 서비스를 만들게 되었는지, 2편에서는 핵심 기능 활용법을 소개했는데요, 오늘은 마지막 편으로 이 앱을 어떤 기술 스택으로 개발했는지, 비전공자/초보자 입장에서의 개발 회고를 남겨보겠습니다.

"나도 아이디어는 있는데, 코딩을 못하니까..." 하시는 분들에게 특히 도움이 되길 바랍니다.

 

프로젝트 전체 기술 스택 한눈에 보기

먼저 이번 프로젝트에서 사용한 기술들을 정리하면 다음과 같습니다:

 

| 영역 | 기술 | 왜 선택했나 |

|------|------|-----------|

| 프론트엔드 프레임워크 | React 18 + TypeScript | 컴포넌트 기반으로 UI를 조립하기 좋고, 생태계가 풍부 |

| 빌드 도구 | Vite | Create React App보다 빌드 속도가 압도적으로 빠름 |

| UI 컴포넌트 | Shadcn-ui | 깔끔한 디자인 + 커스터마이징 자유도 높음 |

| 스타일링 | Tailwind CSS | 클래스명만으로 반응형 디자인 가능, CSS 파일 필요 없음 |

| 라우팅 | React Router v6 | SPA에서 페이지 이동 처리 |

| 백엔드/DB | Supabase | Firebase 대안, PostgreSQL 기반으로 확장성 좋음 |

| 인증 | Supabase Auth | 이메일 + Google OAuth 로그인 |

| AI 빌더 | Lovable.dev | 프롬프트로 UI 프로토타입을 빠르게 생성 |

| 배포 | Lovable 호스팅 | 빌드 & 배포 자동화 |

| PWA | vite-plugin-pwa | 모바일에서 앱처럼 설치 가능 |

기술 스택이 많아 보이지만, 실제로 제가 밑바닥부터 코딩한 비율은 그리 높지 않습니다. 이것이 2024~2026년 개발 환경의 놀라운 점입니다.

 

Part 1: 프런트엔드 프레임워크와 Lovable의 만남

이번 프로젝트에서 가장 큰 역할을 한 것은 Lovable.dev라는 AI 기반 웹 빌더입니다.

 

지난 3월 러버블 무료 이벤트 기간 동안 제작한 것이었습니다.

Lovable이 뭔가요?

Lovable은 자연어 프롬프트로 웹 애플리케이션을 생성해주는 AI 서비스입니다. "자산관리 대시보드를 만들어줘. 차트는 파이 차트로, 색상은 네이비 톤으로"라고 말하면 실제로 동작하는 React 컴포넌트 코드를 생성해 줍니다.

 

어떻게 활용했나?

저는 Lovable을 크게 세 단계로 활용했습니다:

1단계 - 프로토타입 생성

머릿속에 있는 기획안을 프롬프트로 전달하여 기본 골격을 뽑았습니다. 예를 들어:

> "사회초년생을 위한 자산관리 웹앱을 만들어줘. 온보딩(나이, 소득, 투자 성향 입력) → 대시보드(자산 배분 차트) → AI 리포트 생성 기능이 필요해. 모바일 우선 디자인이고, 네이비+화이트 색상 테마야."

이렇게 하면 기본적인 페이지 구조, 컴포넌트, 라우팅이 한꺼번에 생성됩니다.

2단계 - 기능 추가 및 수정

기본 골격 위에 세부 기능을 하나씩 추가했습니다. "머니타입 테스트 기능을 만들어줘. 6개 질문, 5가지 결과 유형으로"처럼 기능 단위로 프롬프트를 던지면, 기존 코드에 자연스럽게 통합되는 코드를 생성해 줍니다.

3단계 - 직접 코드 수정

AI가 생성한 코드를 100% 그대로 쓰지는 않았습니다. 세세한 문구 수정, 디자인 미세 조정, 비즈니스 로직 보완 등은 직접 코드를 열어 일부라도 수정해보려 하였습니다. 이 과정에서 React와 TypeScript를 자연스럽게 익힐 수 있었습니다.

 

코딩 초보자에게 드리는 팁

Lovable 같은 AI 빌더를 쓸 때 가장 중요한 것은 "명확한 기획" 입니다. AI에게 "좋은 앱 만들어줘"라고 하면 애매한 결과가 나옵니다. 하지만 "30대 직장인이 월 소득과 지출을 입력하면, 50-30-20 규칙에 따른 저축 추천 금액을 보여주는 카드 컴포넌트를 만들어줘"처럼 구체적으로 요청하면 놀라울 정도로 정확한 결과물이 나옵니다.

기획이 곧 코딩의 절반이라는 것을 이번 프로젝트를 통해 절실히 느꼈습니다.

---

 Part 2: Shadcn-ui와 Tailwind CSS로 완성한 깔끔한 UI

자산 관리 앱인 만큼 신뢰감을 주는 깔끔한 디자인이 필수였습니다. 아무리 기능이 좋아도 디자인이 허접하면 사용자들이 "이게 내 돈 정보를 넣어도 되는 곳인가?" 하고 의심하니까요.

 Shadcn-ui란?

Shadcn-ui는 복사-붙여넣기 방식의 React UI 컴포넌트 라이브러리입니다. 일반적인 UI 라이브러리(Material UI, Ant Design 등)와 달리, 컴포넌트 코드가 내 프로젝트 안에 직접 들어오기 때문에 원하는 대로 자유롭게 수정할 수 있습니다.

이번 프로젝트에서 사용한 주요 컴포넌트:

- Button: 모든 CTA(Call to Action) 버튼에 사용

- Card: 대시보드의 자산 카드, 블로그 기사 카드

- Accordion: FAQ 질문-답변 접이식 UI

- Progress: 학습 진도 표시 바

- Tabs: 대시보드와 커뮤니티의 탭 전환

- Input/Textarea: 온보딩, 문의 양식의 입력 필드

- Select: 복지 정책 필터 드롭다운

Shadcn-ui의 장점은 일관된 디자인 토큰을 사용한다는 것입니다. CSS 변수로 색상, 간격, 반지름 등을 관리하기 때문에, 한 곳만 바꾸면 전체 앱의 테마가 바뀝니다. 다크모드 지원도 자연스럽게 됩니다.

 

 Tailwind CSS의 위력

Tailwind CSS를 처음 접하면 **"HTML에 스타일을 직접 쓰다니, 이게 맞나?"** 하고 의아할 수 있습니다. 저도 처음에는 그랬습니다. 하지만 한 번 익숙해지면 돌아갈 수 없습니다.

전통적인 방식:

```css

/* styles.css */

.dashboard-card {

  background-color: white;

  border: 1px solid #e5e7eb;

  border-radius: 16px;

  padding: 24px;

  transition: box-shadow 0.2s;

}

.dashboard-card:hover {

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

```

Tailwind 방식:

```html

<div className="bg-card border rounded-2xl p-6 hover:shadow-md transition-shadow">

```

한 줄로 끝납니다. CSS 파일을 왔다 갔다 할 필요 없이, 컴포넌트 안에서 바로 스타일을 적용할 수 있습니다.

특히 반응형 디자인이 정말 쉽습니다. `md:text-2xl`이라고 쓰면 "모바일에서는 기본 크기, 태블릿 이상에서는 2xl 크기"가 됩니다. 이 덕분에 별도의 미디어 쿼리를 작성하지 않고도 모바일, 태블릿, 데스크톱에서 모두 예쁘게 보이는 반응형 웹을 구현할 수 있었습니다.

출퇴근길 지하철에서 스마트폰으로 편하게 쓸 수 있는 것도 Tailwind의 반응형 클래스 덕분입니다.

 

Part 3: 데이터를 다루는 법과 라우팅 처리

대시보드 형태의 앱이다 보니 여러 개의 페이지 컴포넌트를 나누고 관리해야 했습니다. 전체 앱은 약 12개의 주요 페이지로 구성됩니다.

React Router로 페이지 관리

React는 기본적으로 SPA(Single Page Application) 입니다. 전통적인 웹사이트처럼 페이지마다 새로 로딩하는 것이 아니라, 하나의 페이지 안에서 콘텐츠만 바꿔주는 방식입니다. 이를 위해 React Router v6을 사용했습니다.

각 페이지 컴포넌트는 `React.lazy()`를 사용하여 코드 스플리팅(Code Splitting)을 적용했습니다. 이게 무슨 뜻이냐면, 사용자가 대시보드에 접속할 때 대시보드 코드만 다운로드하고, 블로그 페이지 코드는 블로그에 실제로 접속할 때 다운로드합니다.

이렇게 하면 초기 로딩 속도가 크게 빨라집니다.모든 페이지의 코드를 한꺼번에 다운로드하면 500KB가 넘지만, 코드 스플리팅을 적용하면 첫 로딩은 100KB 정도로 줄어듭니다.

 

Supabase로 백엔드 구축

데이터 저장은 Supabase를 사용했습니다. Firebase와 비슷한 BaaS(Backend as a Service)인데, PostgreSQL 기반이라 관계형 데이터를 다루기에 더 적합합니다.

사용자 인증(이메일 가입 + Google 로그인), 프로필 데이터 저장, 학습 진도 동기화, 커뮤니티 게시글 관리 등을 Supabase 하나로 처리하고 있습니다. 별도의 서버를 구축하지 않아도 되니, 운영 비용과 관리 부담이 거의 없습니다.

 

PWA(Progressive Web App) 적용

이번 프로젝트에서 개인적으로 가장 만족스러운 부분이 PWA 적용입니다. `vite-plugin-pwa`를 설치하면 웹앱이 네이티브 앱처럼 동작합니다.

PWA가 적용되면:

- 모바일 홈 화면에 아이콘으로 추가 가능

- 브라우저 주소창 없이 전체 화면으로 실행

- 한 번 방문한 페이지는 오프라인에서도 접근 가능

- 앱 스토어에 등록하지 않아도 설치 가능

별도의 네이티브 앱 개발 없이 웹 기술만으로 앱 같은 경험을 제공할 수 있다는 것이 PWA의 가장 큰 장점입니다. React Native나 Flutter를 배울 필요 없이, 이미 만든 웹앱을 PWA로 감싸면 됩니다.

 

개발 과정에서 겪은 시행착오

솔직히 순탄하지만은 않았습니다. 몇 가지 삽질을 공유합니다.

1. 한국어 경로 문제

제 Windows 사용자 폴더명에 한국어가 포함되어 있어서, 일부 개발 도구가 오동작하는 경우가 있었습니다. 영문 경로에 프로젝트를 두는 것을 추천합니다.

2. 데이터 동기화

localStorage(브라우저 저장소)와 Supabase(서버 DB)를 동시에 사용하다 보니, 데이터 충돌 문제가 발생했습니다. "비로그인 상태에서는 localStorage, 로그인하면 서버와 동기화"라는 원칙을 세우고 나서야 깔끔하게 해결되었습니다.

3. AdSense 승인

웹앱을 만든 후 구글 애드센스 승인을 신청했는데, 처음에 "가치가 별로 없는 콘텐츠"라는 이유로 거절당했습니다. 이를 해결하기 위해 개인정보처리방침, 이용약관, 소개 페이지, 문의/FAQ 페이지, 그리고 블로그 형태의 장문 교육 콘텐츠를 추가했습니다. 도구(tool) 위주의 앱만으로는 AdSense 승인이 어렵고, 충분한 텍스트 콘텐츠가 필요하다는 것을 배웠습니다.

 

 코딩 초보자에게 드리는 메시지

이 프로젝트를 통해 느낀 점을 몇 가지 정리합니다:

첫째, 완벽하지 않아도 일단 시작하세요. "아직 코딩 실력이 부족해서..." 라는 생각으로 프로젝트를 미루지 마세요. 저도 처음부터 잘 알았던 것이 아닙니다. 만들면서 배우는 것이 가장 빠른 학습법입니다.

둘째, AI 도구를 적극 활용하세요. 2026년인 지금, AI 없이 코딩하는 것은 계산기 없이 수학 시험 보는 것과 같습니다. Gemini, Claude, GPT 등의 AI 도구는 코딩 초보자의 실력 격차를 메워줍니다. 초보자라면, 구글의 AI 스튜디오나 lovable, bolt 같은 풀스택 도구들도 활용해보세요. 단, AI에게 맡기더라도 결과물이 어떻게 동작하는지는 반드시 이해하세요. 블랙박스로 두면 에러가 났을 때 대처할 수 없습니다.

셋째, 실생활 문제를 풀어보세요. "투두리스트 만들기" 같은 튜토리얼 프로젝트도 좋지만, 본인이 실제로 겪는 불편함을 해결하는 프로젝트를 만들면 동기부여가 완전히 달라집니다. 저는 재테크가 막막했기 때문에 자산관리 앱을 만들었고, 그 절실함이 프로젝트를 끝까지 완성하게 해 주었습니다.

 

 앞으로의 계획

로보 자산 멘토는 아직 버전 1.0입니다. 앞으로 추가하고 싶은 기능들이 많습니다:

- 실시간 금융 뉴스 연동 강화: 현재 뉴스 티커가 있지만, 카테고리별 필터링과 AI 요약 기능을 추가하고 싶습니다

- 커뮤니티 활성화: 다른 사용자들의 포트폴리오 전략을 공유하고 토론하는 공간을 더 풍성하게 만들 예정입니다

- 알림 기능: 복지 정책 마감일 알림, 리밸런싱 시점 알림 등 푸시 알림을 추가할 계획입니다

이 블로그에서도 개발 과정과 금융 지식을 계속 공유해 나갈 예정이니, 관심 있으시면 구독해 주세요!

 

 마무리

머릿속으로만 생각했던 "사회초년생 및 금윤지식 초보자를 위한 재테크 가이드"가 코딩과 AI의 도움을 받아 어엿한 웹 앱으로 탄생했습니다.

코딩이 무서웠던 분들도 저처럼 아이디어만 있다면 충분히 도전할 수 있습니다. 기획 → AI로 프로토타입 → 직접 수정 → 배포, 이 순서만 따르면 됩니다.

제가 만든 앱의 실제 작동 모습은 아래 링크에서 확인하실 수 있습니다. 궁금한 점이나 피드백은 댓글로 남겨주세요!

 

[로보 자산 멘토 바로가기] https://robo-asset-mentor.lovable.app

AI 자율주행 포트폴리오 - 맞춤형 자산관리

 

3편에 걸쳐 긴 글 읽어주셔서 감사합니다. 여러분의 성공적인 자산 관리와 코딩 도전을 응원합니다!