[Aura_AI] [1편] 화면만 그리던 프론트엔드 개발자가 ‘20단계 몰입 프로젝트’를 시작한 이유

1. “UI 구현”만으로는 채워지지 않았던 갈증

프론트엔드 개발을 공부하며 UI를 구현하는 과정 자체는 즐거웠습니다.
하지만 어느 순간부터 이런 생각이 들기 시작했습니다.

“내가 만든 화면은 어떤 데이터를 기반으로 렌더링되고,
그 데이터는 어디서 어떻게 만들어질까?”

API 요청, 백엔드 로직, 데이터 저장, 그리고 다시 프론트로 돌아오는 흐름까지.
화면 너머에서 벌어지는 일들을 이해하지 못한 채 UI만 구현하는 개발자로 남고 싶지는 않았습니다.
그래서 이번 프로젝트에서는 프론트엔드 관점에서 서비스 전체 흐름을 설계하고 이해하는 것을 목표로 삼았습니다.

 

2. 왜 ‘20단계로 나눈 몰입 프로젝트’인가

이 프로젝트는 연속된 20일 동안 매일 개발하는 방식이 아닙니다.
대신, **실제로 집중해서 개발한 20개의 작업 단위(마일스톤)**로 나누어 진행합니다.

각 단계마다:

• 명확한 목표 설정
• 기능보다 구조와 의사결정 우선
• Git 커밋과 기록을 통한 추적

즉, “시간 채우기”가 아니라
**“의미 있는 개발 단위 20번을 완주하는 프로젝트”**입니다.

이 방식이 실제 실무 개발 방식과 더 가깝다고 판단했습니다.

 

3. AI와 Python을 다시 선택한 이유 (Ollama 프로젝트의 기억)

과거에 Ollama를 활용한 파이썬 기반 AI 팀 프로젝트를 경험한 적이 있습니다.
AI가 데이터를 기반으로 답변을 생성하는 과정을 직접 다뤄보며,
“이건 꼭 다시 제대로 해보고 싶다”는 생각이 들었습니다.

이번 프로젝트에서는 그 경험을 바탕으로:

• GPT API를 활용한 데이터 가공
• Python(FastAPI) 기반 백엔드 설계
• 프론트엔드에서 AI 결과를 어떻게 소비할지에 대한 구조 설계

까지 직접 다뤄보려 합니다.

AI를 “그냥 호출하는 기능”이 아니라
서비스 로직의 일부로 녹이는 경험이 목표입니다.

 

4. 스파오(SPAO) 아르바이트 경험에서 나온 아이디어

프로젝트 아이디어는 제 일상에서 나왔습니다.
의류 브랜드 **스파오(SPAO)**에서 아르바이트를 하며 가장 많이 들었던 질문은 항상 비슷했습니다.

• “오늘 날씨에 이 옷 괜찮을까요?”
• “이 바지에 어울리는 상의가 뭐예요?”

이 반복되는 고민을 보며 자연스럽게 떠올랐습니다.

“날씨, 위치, 개인 취향을 함께 고려해서
코디를 추천해주는 AI 서비스가 있다면?”

Aura_AI는 이렇게 실제 경험에서 출발한 문제를 기술로 풀어보는 프로젝트입니다.

 

 

5. 기술 스택 선택 이유

이번 프로젝트의 기술 선택은 모두 명확한 이유를 가지고 있습니다.

• Next.js (App Router)
  서비스 구조와 라우팅을 프론트엔드 관점에서 체계적으로 설계하기 위해 선택했습니다.
• TypeScript
  프로젝트가 커질수록 데이터 구조를 명확히 유지하고,
  런타임 에러를 사전에 방지하기 위해 도입했습니다.
• Python (FastAPI)
  AI 로직을 다루기에 가장 유연하며,
  프론트엔드와 명확한 역할 분리를 하기 적합한 백엔드 프레임워크라 판단했습니다.
• 아래는 Aura_AI 프로젝트의 실제 의존성 설정입니다.
  Next.js(App Router), React, TypeScript를 기반으로
  프론트엔드 구조를 처음부터 타입 안정성을 고려해 구성했습니다.

 

6. Step 01 — 기능보다 ‘출발선’을 먼저 그리다

Day 1에서는 화려한 기능을 만들지 않았습니다.
대신 다음에 집중했습니다.

• Next.js + TypeScript 프로젝트 초기 세팅
• ESLint 설정으로 코드 스타일 기준 확립
• Git 저장소 연결 및 초기 커밋

이 초기 커밋은 단순한 파일 저장이 아니라,
이 프로젝트를 끝까지 책임지고 완주하겠다는 선언입니다.

Next.js(App Router) 기반 프로젝트를 생성하고,
app 디렉터리를 중심으로 서비스 구조를 잡았습니다.
아직 기능은 없지만, 이후 확장을 고려한 기본 골격을 먼저 세팅했습니다.

 

7. 앞으로의 여정

Aura_AI 프로젝트는 다음과 같은 흐름으로 진행됩니다.

• 서비스 구조 및 라우팅 설계
• 인증(OAuth)과 상태 관리
• 날씨 API + GPT API 연동
• Python 백엔드와 데이터 저장
• 배포 및 트러블슈팅 정리

각 단계는 모두 기록으로 남기며,
“왜 이 선택을 했는가”를 설명할 수 있는 프로젝트를 목표로 합니다.

 

 

마치며

이 프로젝트는 단순한 결과물이 목적이 아닙니다.
프론트엔드 개발자로서 서비스를 바라보는 시야를 넓히는 과정입니다.

20단계가 끝났을 때,
“UI만 만들 줄 아는 개발자”가 아니라
하나의 서비스를 처음부터 끝까지 설명할 수 있는 개발자가 되어 있기를 기대하며
Aura_AI의 첫 단계를 시작합니당~!