[기본기]

[개인 프로젝트 "Hyssop" 개발]

1. 틈틈히 작성하던 PRD 상세히 작성 후 개발 시작

2. '악보 보기', '콘티 보기', '곡 진행' 파트 개발

- 이미지나 PDF 파일의 악보를 업로드 하고 특정 악보를 선택해서 콘티를 구성하는 기능 개발

- 특정 콘티에 대해서 각각 곡들이 어떤 순서로 진행되는지 입력하는 기능 개발

- 각각의 콘티에 참고할 수 있는 유튜브 링크 추가하는 기능 개발

- 악보와 콘티 검색하는 기능 개발

- 악보 파일이 "여러 장"일 경우에도 문제 없이 저장하고 콘티에도 추가되도록 기능 개선

- PDF 파일이 브라우저 보안 정책 상 안보이던 문제 해결

[SSAFY 2학기 준비]

1. React 기초 조금 공부

- 환경설정 및 설치법

- 변수 바인딩({ }) / 조건부 렌더링(조건문) / 리스트 렌더링(반복문) / 상태관리(state)

2. Docker 기초 조금 공부

시작하며...

솔루션, 소프트웨어 영업 직무로 근무하면서 개발자들과 소통할 경우도 많고, 직접 판매하는 솔루션의 API를 연동해 보기도 하면서 은근 "코딩"을 해 볼 기회가 있었다.

하지만 체계적인 공부 없이 그때그때 필요한 것만 익혔던 나는 파편화 된 지식으로 오히려 모르는 것보다 더 위험한 "어설프게" 아는 코린이(코린이라고 하기에도 민망한)였다.

"요즘에는 Python도 옛날 언어이고 React를 배워야 한대요!"

내가 실제로 솔루션 영업직으로 근무할 때, 엘리베이터에서 동기에게 했던 말이었다. 그렇다 나는 프로그래밍 언어와 라이브러리도 정확히 구분하지 못하는 혼돈의 코린이였다.

그런 코린이를 이제는 "그럴듯한" 웹 앱을 풀스택으로 개발할 수 있게 성장시켜준, 값진 "나의" SSAFY 1학기를 정리해본다.

25년 6월, 서울캠퍼스 최종합격 메일을 받고 7월 2일, 입과 안내 메일을 받았다.

7월 8일(화)이 1학기 시작일이였는데, 시작 전부터 사전 과제로 강의도 들어오고 알고리즘 문제도 풀고, AI 과제도 줘서 쉽지 않은 1년이겠다는 느낌이 팍팍 오는 사전 준비 기간이었다.

정규 교육이 시작되는 첫 날 간단한 레벨테스트를 보고, 나는 비전공 파이썬트랙 과정의 서울 3반으로 배정받았다. 그리고 7/18일 까지는 AI 스타트캠프 기간으로 AI 아이디어 해커톤도 하고 앞으로 SSAFY 과정이 어떻게 진행되는지 교육 받고 적응하고 그러는 시간이었다. 이 때 간단한 CLI랑 git 사용법도 배웠는데 "스타트캠프"인 만큼 진짜 앞으로의 과정을 준비하고 적응하는 시간이었다. 개인적으로는 백준 계정을 만들고 github도 만들고 gemini도 구독 시작하고 그랬던 기간.

그렇게 적응기간이 끝나고 본격적인 공부와 테스트의 시간이 시작됐다.

싸피 1학기 교육과정은 웹개발에 필요한 여러 도구들과 알고리즘 등 지식이 필요한 것들을 학습하고 거의 매주 금요일마다는 관통 PJT라는 1학기 최종 프로젝트를 준비하는 시간으로 구성되어 있다. 그리고 14기부터 본격적으로 대폭 늘어난 AI 교육도 있다. 매번 하나의 과목에 대한 학습이 끝나면 테스트를 보는데 그렇게 총 10개의 과목평가와 6개의 월말평가를 봐야하고, 그 중 절반 이상을 pass 해야 1학기 수료가 가능하다. 추가로 알고리즘 역량을 평가하기 위한 "SW 역량 평가" 도 비전공자의 경우 IM수준 이상을 통과해야 한다. 새로운 과목을 배울 때는, 오전에 강의를 2시간 듣고 2시간 동안 배운 개념을 오후에 실습과 과제를 통해 익히는 과정으로 되어있다. 이 실습과 과제가 진짜 알차기 때문에 매일 주어진 2개의 과제와 8개의 실습을 모두 끝내면 당일 배운 개념들을 확실히 익힐 수 있었다.

그렇게 1학기 동안 배운 것들을 정리하면,

이정도 인 것 같은데 돌아보니 진짜 많은 것들을 알차게도 배웠다!! ㅋㅋ

12/11 이후에는 취업박람회 일정이 있었고 최종 관통 프로젝트 개발과 경진대회를 진행하고 1학기가 마무리 되었다.

<관통 프로젝트 회고>

강의 중간중간 진행된 과목평가와 월말평가는 평균 80점으로 All Pass! 그리고 SW 역량 평가도 IM 다음 단계인 A형 취득!!

평가점수는 개인적으로 못한것도 아니고 잘한것도 아닌 것 같은,, 애매한 점수로 느껴지지만 그래도 최선을 다한 결과라서 만족!

SSAFY 1학기에는 일타싸피, 배틀싸피, AI챌린지, 싸피레이스까지 여러 게이미피케이션과 경진대회도 있다.

나는 모두 준수한 성적을 내기는 했지만 반대표로 선정되거나 입상을 하기에는 부족했다. ㅠㅠ

그치만 주어진 일정 안에서 각각 최선을 다했기 때문에 이것도 만족

너무 잘하는 친구들이 많아~~ ㅠㅠ 고수들이 SSAFY에 오는건 반칙이잖아요...

1학기 초반에 작성했던 목표 차트를 보면서 완료한 것들을 체크하고 보니 아예 잊어버렸던 것도 있고 잘 완료한 것도 있고 이 정도면 무사! 보람! 수료! 인가..?!

마치며...

SSAFY 1학기, 나름 열심히 최선을 다해서 달려왔다고 생각했는데 이렇게 돌아보니 아쉬움이 더 많이 남는 것 같다.

개발자로서의 기본기를 조금 다졌을 뿐, 어떤 눈에 띄는 성과가 부족한 것 같다는 생각이 계속 드는 것 같다. 나는 아직 배고프다아!!

그래도 어설프게 알던 여러가지 개념들을 체계적인 교육과정과 양질의 강의들로 재정립하고 실제 프로젝트 하나를 완성하면서 나도 할 수 있다는 자신감을 얻는 시간이었다.

2학기에는 좀 더 몰입하고 집중해서 진짜 가치 있는 서비스를 만들어내고 취업 성공할 수 있기를!!!

Vue3를 어느 정도 알고 있기 때문에 Vue3와 비교하여 리액트를 공부해보자

기본문법 4가지를 비교하여 정리하기 전 가장 큰 차이는 Vue는 '디렉티브(v-if, v-for)' 중심이고, 리액트는 '순수 자바스크립트' 중심이라는 점

1. 변수 바인딩 (Data Binding)

Vue에서는 데이터 바인딩을 위해 {{ }}를 쓰지만, 리액트는 중괄호 { } 하나만 사용
또한 리액트는 단방향 데이터 흐름을 가짐

• Vue3: <p>{{ message }}</p>
• React: <p>{message}</p>

function App() {
  const name = "React";
  return (
    <div className="container"> {/* class 대신 className 사용 */}
      <h1>Hello, {name}!</h1>
      <img src={logo} alt="logo" /> {/* 속성 바인딩도 { } 사용 */}
    </div>
  );
}

2. 조건부 렌더링 (Conditional Rendering)

리액트에는 v-if가 없음. 대신 자바스크립트의 논리 연산자(&&)나 삼항 연산자를 사용

• Vue3:환영합니다!
• React:
  {isLoggedIn &&환영합니다!} (간단한 조건)
  {isLoggedIn ?환영합니다!:로그인하세요.} (If-Else 상황)

3. 리스트 렌더링 (List Rendering / 반복문)

리액트에는 v-for가 없음. 자바스크립트 배열 메서드인 .map() 을 사용하여 배열을 HTML 요소로 변환

• Vue3:
• {{ item.text }}
• React:

const items = [{id: 1, text: '사과'}, {id: 2, text: '바나나'}];

function MyList() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.text}</li> // key값은 필수!
      ))}
    </ul>
  );
}

4. 상태 관리(State)

Vue3의 ref()나 reactive() 대신, 리액트는 useState Hook 을 사용. 리액트의 상태는 불변성(Immutability) 을 지켜야 하므로 값을 직접 수정하지 않고 반드시 'setter 함수'를 써야 함.

• Vue3: const count = ref(0); count.value++;
• React:

  import { useState } from 'react';
  
  function Counter() {
  	const [count, setCount] = useState(0); // [현재값, 변경함수]
  
  	return (
  		<button onClick={() => setCount(count + 1)}>
  		클릭: {count}
  	);
  }

5. 정리

• 리액트는 "HTML처럼 보이는 자바스크립트(JSX)를 작성한다"고 생각하자
• JSX는 return( )안에 작성함

환경 설정

1. node.js 설치 https://nodejs.org/ko/download
2. VS Code 설치 https://code.visualstudio.com/docs/?dv=win64user

프로젝트 시작하기

프로젝트 시작할 폴더에서 터미널 열고 npx start-react-app [프로젝트명] 입력

프로젝트 구조

최상위 폴더

• node_modules: 프로젝트 실행을 위한 외부 라이브러리 저장 공간, 직접 수정하지 않고, 깃허브 올릴 때도 제외
• public: 브라우저가 직접 읽는 정적 파일들이 있음
  • index.html: 리액트 앱이 실행될 때, 이 파일의 특정 빈 공간(<div id="root"></div>)에 작성한 컴포넌트들이 끼어 맞춰져서 브라우저에 표시
• src: 실제 리액트 코드를 작성하는 폴더

src 폴더 내부

• App.js: 실제 화면에 그려지는 메인 컴포넌트
• App.css: App.js의 스타일을 정의하는 시트
• index.js: 리액트의 입구로 App.js에서 만든 컴포넌트를 가져와서 public/index.html에 연결해 주는 역할
• index.css: 전체 앱에 공통적으로 적용되는 스타일 파일
• logo.svg: 리액트 로고 이미지 파일
• App.test.js / setupTests.js: 코드가 잘 작동하는지 테스트하기 위한 파일들입니다. 초보 단계에서는 일단 무시해도 괜찮
• reportWebVitals.js: 앱의 성능(속도 등)을 측정할 때 사용하는 도구

설정 및 정보 파일 (The Metadata)

• package.json: 프로젝트의 이름, 버전, 그리고 어떤 라이브러리를 사용하는지 적혀 있는 명세서입니다. 나중에 새로운 라이브러리를 설치하면 여기에 기록됩니다.
• package-lock.json: 설치된 라이브러리들의 정확한 버전 정보를 담고 있어, 다른 사람과 협업할 때 환경을 똑같이 맞춰줍니다.
• .gitignore: Git(버전 관리)을 사용할 때, node_modules처럼 용량이 크거나 올릴 필요가 없는 파일을 제외하도록 설정하는 파일입니다.
• README.md: 이 프로젝트가 무엇인지 설명하는 문서입니다.

한 줄 요약

브라우저는 public/index.html을 열고, 그 안의 내용을 src/index.js가 src/App.js의 내용으로 채워 넣는다

1. 프로젝트 개요

• 프로젝트 명: SyncMovie(싱크무비)
• 핵심 컨셉: 단순한 평점 기반 추천을 넘어, 사용자가 선택한 줄거리와 인물(감독/배우)영화를 기반으로 영화를 추천하고, 리뷰를 공유하는 커뮤니티 서비스
• 개발 기간: 2025.12.20 - 2025.12.24(5일)
• 개발 인원: 2인
  • 이영종(팀장): 인증, 권한관리, 커뮤니티 기능 및 페이지 개발
  • 문희원(팀원): 데이터 수집, 추천 기능 및 페이지 개발
• 기술 스택
  • Backend: Django REST Framework (DRF)
  • Frontend: Vue3, Pinia, BootStrap
  • Database: SQLite
  • Data: TMDB API
• GitHub Link
  • https://github.com/youngjong-96/SyncMovie/tree/main

2. 주요 기능 및 아키텍처

주요 기능

• 사용자가 선택한 영화의 줄거리와 배우, 감독 정보를 기반으로 TMDB 데이터를 필터링하여 추천 영화 제공
• TMDB API 와 YOUTUBE API를 활용하여 영화의 예고편 제공
• 리뷰 커뮤니티: 영화별 평점 및 상세 리뷰 작성, 사용자 간 소통을 위한 소셜 피드 및 마이페이지 기능 제공.
• RESTful API: Django를 활용해 프런트엔드와 백엔드를 완전히 분리하여 데이터 교환 효율성 극대화.

아키텍처

- ERD

- Vue Tree

3. 기술적 도전과 해결 과정 (Trouble shooting)

1. 프로젝트에 사용할 데이터 취득과 전처리 문제

프로젝트에 사용할 영화 데이터를 구하고 전처리 하는 과정에 많은 시간을 투자했고

TMDB API로 최신 인기 영화 데이터를 호출해서 사용하기로 결정하기까지 많은 의사결정을 거쳤음.

1. Kaggle에 TMDB 1M 데이터 사용

가장 처음 선택한 데이터는 Kaggle에 있던 공개된 데이터로 출시일, 유명도, 평점 등을 기준으로 최신영화, 평점이 일정 점수 이상인 영화 등을 필터링 하고 Null 값과 비어있는 값 등을 전처리해서 약 20,000개의 데이터를 확보, 사용했음.

그러나 데이터가 모두 영어여서 한국인 사용자를 가정하고 진행하는 프로젝트 특성 상 UI, UX적인 측면에서 문제가 있었음.

2. TMDB API 사용

TMDB API 중 popular를 이용하여 평점이 높은 영화 데이터 1차 호출, 이후 응답받은 데이터 중 TMDB ID를 이용해 detail과 actor 정보를 추가로 요청해서 최종 데이터 수집

이후 포스터 URL을 완성하고 배우 정보를 5명 까지만 수집하는 등 전처리 과정을 거쳐 최종 1,000개 데이터 확보(data_preprocessing.py 파일 참고)

한글로 된 최신 영화 데이터들을 확보할 수 있었으나 데이터 수가 부족한 문제가 있었음. -> 추천 기능 약화

3. TMDB API 사용 (데이터 수 증가)

초기 수집하는 데이터 수를 증가하여 전처리 이후 약 2,700개 데이터를 확보. -> 추천 기능 강화

그러나 overview(줄거리) 컬럼에 빈 문자열이 제대로 필터링 되지 않았던 것을 발견

4. TMDB API 사용 (데이터 수 증가 및 전처리 강화)

최종적으로 초기 6,000개 데이터를 불러온 후 전처리를 좀 더 꼼꼼히 진행하고 최종적으로 약 3,700개 데이터를 확보 및 사용

이로 인해 가장 양질의 데이터를 확보하여 추천 품질도 가장 좋았으며, 기본 UI, UX 측면에서도 가장 좋은 데이터 확보

2. 생성형 AI를 API로 연동하여 닉네임 추천 받기

간단한 작업이라 생각하여 gemini-2.0-flash 모델을 사용하고 프롬프트에도 "한글만 사용하라", "5~12자로 생성하라", "특수문자를 사용하지 말아라" 등 꼭 필요한 요청사항 외에 다양한 요구사항을 넣고 길게 작성하였음

그 결과 생성 시간도 30초 정도로 매우 길고 계속 비슷한 닉네임만을 추천해서 결과가 매우 만족스럽지 못했음

이에 모델을 gemini-2.5-flash로 변경했는데 그래도 크게 성능이 개선되지 않았음

결국 gemini-2.5-pro로 최종 결정하고 프롬프트도 꼭 필요한 것들로만 작성해서 최종 생성 시간을 10초 정도로 줄일 수 있었음

간단한 기능이라 프롬프트 대충 작성해서 api로 요청 받아서 결과값 띄워주면 될 거라고 생각했는데 생각보다 정교한 프롬프트 작업과 모델 선정이 필요했음

3. 배포하기(배포 쉬워졌다며,,, 왜 이렇게 어려운건데,,,)

1. CloudType(back) + Netlify(front)

- github repository를 연동해서 바로 배포하는 방법을 사용했는데 프로젝트 repository에 back과 front가 둘 다 들어있고
각각 다른 툴로 배포하려고 할 때는 work directory를 잘 설정해줘야 함!!(은근 까먹음)
- django secret key, 사용한 여러 API key 등 환경 변수 세팅 잘 해줘야 함(당연하지만 은근 까먹음)
- migrate나 gunicorn 실행을 위한 Run command 설정 해줘야 함
- front 배포할 때는 코드에 local로 작성한 요청 주소들을 배포한 back요청 주소로 모두 교체해야 함
(처음 코드를 작성할 때부터 배포할 때를 고려해서 하드코딩하지 말기 ㅠㅠ)
- front와 back이 서로 통신할 수 있도록 django settings.py에서 ALLOWED_HOST, CORS, CSRF 등 설정해줘야 함
(이게 진짜 초보자에게 어려운 부분인듯 ㅠㅠ)

이런 여러가지 사항들을 Gemini를 통해 알아가면서 거의 4시간 만에 배포에 성공...했으나...!

무료 티어에서 제공하는 메모리가 너무 작아서 추천 기능에서 out of memory 발생!! 백엔드 서버가 강제로 꺼짐!!!!

뿐만 아니라 CloudType는 무료티어일 경우 매일 한 번씩 강제로 서버가 꺼져서 다시 켜줘야 하고 둘 다 무료사용량을 테스트 하는 동안 전부 사용해버려서 아예 새로운 조합으로 다시 배포해보기로 결정

2. Supabase(DB) + Koyeb(back) + Vercel(front)

DB가 없으면 back 서버가 켜질때마다 DB를 migrate 해야하고 기존 데이터도 모두 날아가니까 다시 하는 김에 DB도 해보기로 함

배포툴마다 UI가 달라서 "환경 변수 설정하는게 어디있지...?", "run command는 어디에..?", "요청 주소는 뭐지" 등등 조금 헤매기는 했지만 일단 기본 설정은 한 번 해봤다고 전보다는 조금 빠르게 했음

그러나 새롭게 추가한 Supabase에 데이터를 적재하는게 생각보다 쉽지 않았음ㅠㅠ

거기에 프론트랑 백엔드랑 기본적인 통신조차 자꾸 실패하니까 배포따위 안해버리고 싶었지만

거의 6시간 만에 DB에 테이블 생성(데이터 없음), 백엔드 서버 배포, 프론트 배포, 백엔드와 프론트 통신 성공(회원가입 후 로그인 성공 (근데 겁나 느림))까지 할 수 있었다,,,

그 험난했던 여정은 gemini가 아래와 같이 정리해줬다

🚩 1단계: 데이터베이스 연결 및 로컬 접근 시도
로컬 컴퓨터의 데이터를 Supabase 클라우드 DB로 옮기려 했으나, 네트워크 계층의 장벽에 부딪혔던 시기입니다.
- 시도: Git Bash 및 로컬 Django 설정을 통해 Supabase에 loaddata 시도.
- 발생 에러:
    - bash: !1204: event not found: 비밀번호 내 특수문자(!)가 Bash 히스토리 확장 기능을 건드려 발생.
    - django.db.utils.OperationalError: could not translate host name: 로컬 ISP(인터넷 서비스 제공업체)의 DNS가
      Supabase 도메인을 해석하지 못함.
    - Connection timed out (10060): IP 주소로 직접 접근했으나 로컬 방화벽/네트워크에서 DB 포트(5432) 접속 자체를 차단함.
- 해결방안(해결 못함): 비밀번호 인코딩(%21) 적용 및 로컬 시도 중단.
           대신 이미 DB와 통신이 검증된 Koyeb 서버 내부에서 해결하기로 전략 수정.

🚩 2단계: 백엔드 서버 구축 및 헬스 체크 통과
Koyeb에 Django 서버를 올리는 과정에서 서버 부팅과 데이터 적재가 충돌했던 시기입니다.
- 시도: Koyeb Run command에 loaddata와 gunicorn 실행 명령을 동시에 넣음.
- 발생 에러:TCP health check failed on port 8000: 3,800개가 넘는 데이터를 넣느라 Gunicorn이 정해진 시간 내에 응답
                 하지 못해 Koyeb이 서버가 죽었다고 판단하고 강제 종료함.
- 해결: loaddata 명령을 분리하고 서버 실행(gunicorn)만 집중시켜 Healthy 상태를 먼저 확보함.

🚩 3단계: 프론트엔드-백엔드 연동 및 통신 이슈
Vercel에 올린 프론트엔드와 Koyeb 백엔드가 서로 대화하게 만드는 과정입니다.
- 시도: Vercel 환경 변수에 Koyeb URL을 설정하고 API 요청.
- 발생 에러:
    - 404 Not Found (Vercel 도메인 포함): 요청 주소가 https://sync-movie.vercel.app/https://urban-sheila... 처럼 형성
     됨. 프론트엔드에서 상대 경로로 인식해 자기 자신(Vercel)에게 요청을 보낸 상황.
     Failed to load resource: CORS 설정 미비로 인해 브라우저가 보안상 요청을 차단함.
- 해결:Vercel 환경 변수에 https://를 명확히 포함하여 절대 경로로 수정.
          settings.py에서 CORS_ALLOW_ALL_ORIGINS = True 및 미들웨어 순서 조정을 통해 통신 허용.


✅ 요약: 현재까지 해결된 것 vs 남은 숙제

상태	항목	내용
성공	네트워크 통로	프론트(Vercel)에서 백엔드(Koyeb)로 요청이 전달됨
성공	서버 상태	Django 서버가 Koyeb에서 Healthy 상태로 구동됨
미결	데이터 적재	api_data.json의 영화/장르/배우 데이터가 DB에 아직 없음

원래 하려고 했던 추천 기능은 테스트 해보지도 못하고 두 번째 배포 시도도 상처 뿐인 마음과 함께 종료,,,

이후 Koyeb서버 빌드 후 console에서 loaddata를 하려고 했는데 그것도 메모리 문제로 안돼서 데이터를 적재하는 별도의 python 코드를 짜서 push 하고 바로 loaddata 하는 대신 새로 만든 fast_load.py 파일을 실행하는 방법으로 데이터 적재를 시도했다

그런데 이것도 장르별, 배우별, 영화별로 데이터를 넣으려니 그것도 메모리가 부족해서 100개 단위로 넣는 방법을 시도했다가 그것도 계속 멈춰서 10개씩 시도하는 방법으로 반복 시도...

파이썬 코드 짜고 ->  push -> 재배포 -> console에서 명령실행의 무한 루프....

그 결과 전체 데이터의 일부인 장르(19개), 배우(852개), 영화(213개) 정도의 데이터를 supabase에 적재했다

그리고 배포한 사이트에서 회원가입 후, 로그인까지 잘 되는 것을 확인했으나

4. 협업 및 프로젝트 관리

Git 규칙

branch 운영 방식

1. master branch에 직접 수정 x
2. yj, hw 브랜치로 분리해서 작업 후 이상 없을 시 master branch로 merge
3. 최종 merge전 팀원과 상의하고 conflict 발생 시 협의 후 코드 선택

commit 기록 내역 원칙

5. 개발 기능 단위로 commit 진행
6. 개발 중 잘못된 사항이 발견되어 수정한 경우 동일한 commit내용에 _수정을 붙여서 commit
7. commit 내용 양식: 요구사항번호[_기능명][_수정(수정한 경우)]

기존에 많이 알려진 검증된 branch 전략들은 모두 무시한 채
단순히 master 브랜치는 건들지 말고 니꺼 내꺼 브랜치 만들어서 필요 시점마다 협의해서 merge하자! 전략 선택!
그 결과 의외로(?) 아무런 문제 없이 원활한 협업과 코드 관리가 이루어졌는데
이건 순전히 함께 개발한 인원이 2명으로 매우매우 적고 팀워크가 잘 맞았기 때문이라고 생각
commit 기록 원칙도 처음에 정했는데 정작 개발하면서 거의 지켜지지 않았음...ㅋㅋㅋ

하지만 이런 모든 전략들과 원칙은 결국 "원활한 협업"을 위한 것이기 때문에 이번 프로젝트에서는 중요도가 좀 떨어졌던 부분이라고 생각하고 앞으로의 프로젝트에서는 필요하다면 철저히 잘 지킬 수 있을 것이라 생각함

5. 잘한 점 및 아쉬운 점 (Self-Reflections)

잘한 점

기획부터 백엔드, 프론트 개발, 배포까지 모두 직접 진행함으로 모든 과정을 이해할 수 있었던 것

티어와 자주 소통함으로서 원활한 협업을 진행한 것

error 메세지를 분류하여 사용자가 현재 상황을 인식할 수 있도록 하고(진행중이여서 기다리면 되는지, 아니면 문제가 있어서 뭔가를 수정해야 하는지 등) 다음 행동을 가이드 해서 UI, UX를 개선해 나간 것

처음 데이터를 수집한 것에서 만족하지 않고 계속해서 더 양질의 데이터를 얻기 위해 찾아보고 전처리 한 것

아쉬운 점

개발 기간이 짧아서 정말 홈페이지의 기본적인 틀만 잡고 기능들도 간단한 것들 밖에 추가하지 못했던 점이 아쉬웠다

생성형 AI로 닉네임만 추천해주는 것이 아니라 프로필 이미지도 추천해주는 기능도 추가하고 1달 주기로 TMDB API에서 최신 영화 데이터를 자동으로 불러와서 영화 데이터들을 자동으로 업데이트 하도록도 만들고 싶었는데 시도해 보지 못한 것이 아쉽다

하지만 만약 다 구현했다면 배포 과정에서 또 어떤 지옥을 맞이했을지 상상만 해도 아찔하다,,,

그리고 개발 초반에는 문서화 하는 것에도 집중했는데 점점 시간이 없어지면서 문서화에 들이는 시간이 줄어들었던 게 조금 아쉽다

개발에 투자하는 시간과 문서화에 투자하는 시간이 어느 정도 되어야 가장 효율적이고 균형 있는가는 항상 고민이겠지만

이번 프로젝트에서는 문서화에 투자했던 시간이 많이 부족했던 것 같기도 하다 

6. 마무리하며

SyncMovie는 나의 첫 그럴듯한 프로젝트로, 프로젝트 기획부터 배포까지 모든 과정을 직접 해볼 수 있었던 소중한 프로젝트였다

비록 개발 기간도 짧고 함께한 인원도 적은 토이프로젝트 수준이었지만 풀스택으로 모든 과정을 경험해보고 협업도 해보면서 앞으로 있을 프로젝트를 성공적으로 해나가기 위한 훌륭한 초석이었다고 생각한다

제일 재밌었던 건 Gemini-2.5-pro로 닉네임 추천 기능 완성하고 닉네임 추천 받았을 때 재밌는 닉네임이 나왔을 때,

제일 기억에 남는 건 인증과 권한 관리 부분을 개발할 때, 회원가입과 로그인 과정부터 UI, UX적인 측면에서 개선할 수 있는 부분이 얼마나 많고 다양한지 깨달았을 때,

제일 힘들었던 건 배포를 시도했던 전 과정,,,

[Lovable]  https://lovable.dev/

Lovable이란?

Lovable(러버블)은 한 마디로 '말만 하면 웹 서비스를 실제로 만들어주는 AI 개발 플랫폼'이다.

기존의 노코드(No-code) 툴들이 미리 정해진 블록을 조립하는 방식이었다면, Lovable은 사용자가 채팅으로 요구사항을 설명하면 AI가 직접 프론트엔드부터 백엔드, 데이터베이스까지 연결된 실제 코드를 짜서 웹 앱을 구축해 준다.

1. 주요 특징

• 풀스택 개발: 화면 디자인(React)뿐만 아니라 데이터 저장(Supabase 연동), 사용자 인증(로그인), 비즈니스 로직까지 한 번에 생성한다.
• 실제 코드 기반: 생성된 결과물은 단순한 디자인 시안이 아니라, 언제든 다운로드하거나 GitHub로 내보낼 수 있는 '진짜 소스 코드'를 만들어낸다.
• 실시간 미리보기 & 수정: 채팅창 옆에 작업 중인 앱이 실시간으로 떠 있어서, "이 버튼을 빨간색으로 바꿔줘", "검색 기능을 추가해줘"라고 말하면 즉시 반영된다.
• Vibe Coding: 복잡한 문법을 몰라도 "이런 느낌의 앱을 만들어줘"라는 식의 대화만으로 개발이 가능해 '바이브 코딩' 도구로도 불린다.

2. 어떤 때 사용하면 좋은가요?

Lovable은 속도와 검증이 필요한 상황에서 강력한 위력을 발휘한다.

• 아이디어 검증(MVP 제작): 새로운 사업 아이디어가 떠올랐을 때, 며칠씩 고민하지 않고 단 몇 시간 만에 실제로 작동하는 시제품을 만들어 고객 반응을 살필 수 있다.
• 내부 도구 제작: 사내에서 사용할 대시보드, 고객 관리용 CRM, 간단한 예약 시스템 등 복잡한 설계가 필요 없는 도구를 개발자 도움 없이 직접 만들 때 유용하다.
• 개발자 생산성 향상: 전문 개발자가 반복적인 '보일러플레이트(기초 코드)'를 짜는 시간을 줄이고, AI가 만든 초안을 바탕으로 세부 로직만 수정하고 싶을 때 좋다.
• 랜딩 페이지 제작: 마케팅용 페이지나 이벤트 페이지를 고퀄리티의 디자인과 함께 빠르게 배포해야 할 때 효과적.

직접 사용해보자

홈페이지 접속해서 구글 계정으로 로그인만 하면 바로 무료버전으로 사용해 볼 수 있다

메인페이지에서는 사이드바에서 여러 메뉴들을 선택할 수 있고 중앙에 있는 프롬프트에 원하는 요청을 입력해서 바로 프로젝트를 시작할 수 있다.

백엔드 개발자 포트폴리오 웹페이지를 개발하려고 해. 기본적인 포트폴리오 양식으로 만들어줘. 블랙앤화이트 톤에 깔끔한 폰트로 사용해줘.

위와 같이 프롬프트에 요청하니까 바로 웹 페이지 하나를 뚝딱 만들어주는데 단순히 디자인적인 요소만 볼 수 있는게 아니라 Preview탭에서 실제 동작을 확인할 수 있었다.

만들어주는 속도는 엄청 빠르진 않았지만 기다릴만한 정도?

간단한 포트폴리오 페이지 정도는 5분 이내로 완성했다.

그리고 디자인만 해주는건줄 알았는데 실제 동작하는 웹페이지를 만들어 줌!

프로젝트에는 Preview, Cloud, Design, Code, Analytics, Security, Speed 탭이 있고 각각 관련된 기능들을 사용할 수 있다.

Preview: 실제 브라우저에서 동작하는 것처럼 만들어진 웹 페이지를 확인할 수 있음

Cloud: Built-in-backend를 연동하거나, LLM을 연동할수도 있고, 권한 설정 등 배포를 위한 설정들을 하는 곳이다.

Design: 원하는 테마를 전체적으로 적용하거나 웹페이지 요소들을 PPT를 수정하는 것처럼 수정할 수 있는 페이지이다. PPT처럼 웹페이지를 바로 수정하는게 매우 신기한 경험이었음

Code: 만들어진 코드를 확인할 수 있는 페이지로, 코드를 다운로드 받을 수 있다

Analytics: 배포한 웹페이지에 대한 분석을 제공.

Security: 보안 취약점을 파악해서 알려주고 고치는 것도 제공.

Speed: 웹페이지에 관련된 다양한 분석을 제공.  탭을 클릭하면 해당 이슈를 보여줌. SEO도 있음.

정말 코딩을 하나도 몰라도 완성된 서비스는 아니더라도 실제 동작하는 프로토타입을 만드는 수준으로는 너무 좋은 것 같다.
대시보드에서 프로젝트 별로 관리가 가능한 것도 사용자 편의성에서 아주 좋은 듯.
기존에 사용하던 gemini 로 어느정도 대체할 수 있을 것 같지만 배포가 쉽게 가능하고, 여러가지 보고서를 제공하고 쉬운 UI로 개발이 가능하다는 점에서 차별성이 있는 것 같다.
다만, 매일 5credits 를 제공하는데 무료 크레딧 만으로는 정말 테스트만 가능했다.
개발자보다는 기획자들에게 더 유용한 AI 서비스인 것 같다.