바이브코딩으로 간단하게 최신영화 리스트 웹 만들기

JIWOO YUN·2025년 9월 12일
0

작년에 회사에 입사하고 난 후 에 프로젝트를 진행하면서 다른 것들을 찾아보다가 바이브 코딩 관련해서 알게되어 한번 만들어 볼까 하면서 진행한 프로젝트

진행 내용

어떤걸 만들까 생각해보다가 네이버에서 영화 리스트를 보여주던게 사라진게 생각나서 한번 장르별 최신영화 Top 100을 보여주는 웹 프로젝트를 진행해보았다.

영화관련 데이터는 TMDB api 를 이용하여 영화 데이터를 가져오고 상단에 영화 이름 검색을 통해서 영화를 가져올 수 있게 해달라고 요청을 하였다.

아래는 실행 화면이다.

중간중간에 장르별로 카드 형식으로 보여주는 형식이나 웹 화면 크기에 맞춰서 변경하는 자잘자잘한 요청을 계속해서 해당 화면이 만들어졌다.

영화 카드를 클릭하면

해당 영화의 상세 내용과 예고 유튜브 영상을 가져올 수 있게 되있다.
상세 화면의 경우에도 처음에는 이미지만 가져온다던가 유튜브영상을 가져오지 못하거나 크기가 안맞는 이슈가 많았는데 이 경우에는 처음 전달을 잘 못했는지 화면을 바꿀려고 해도 제대로 못바꿔서 직접 수정을 하는 귀찮은 점이 있었다.

후기


node.js 를 써본 적이 없었는데도 ai에 맡겨서 node.js를 통한 프로젝트트를 만들 수 있는게 신기했다.

아직 다 만든건 아니지만 하면서 느낀 것은 간단한 프로젝트의 경우에는 ai에 상세하게 설명해주고 단계까지 이야기 해주면 좀 더 그럴싸하게 만들어준다는 장점이 있다. 물론 ai가 코딩하다보니 내가 모르는 기술을 사용하는 경우도 있기 때문에 ai가 짠 코드를 한번씩 읽어보면서 학습도 되는 거같다.

현재는 최신영화 기준 Top100으로 진행되지만 나중에는 AI를 추가하여서 추천영화를 넣는 것도 한번 해보고 검색 기준을 추가로 넣어보던지 여러가지 추가해볼 예정이다.

https://github.com/YunJiW/MovieRecommand

profile
열심히하자

0개의 댓글