테슬라 커스텀 랩핑 스튜디오 프로젝트

Next
날짜 없음

1. 프로젝트 개요

ㄱ. 테슬라 커스텀 랩핑 스튜디오 (Tesl-Wrap)

  • Tesl-Wrap은 사용자가 상상하는 테슬라의 랩핑 디자인을 AI(Gemini 3 Pro)를 통해 실시간으로 생성하고 확인해볼 수 있는 차세대 커스터마이징 웹 애플리케이션

ㄴ. 개발 동기 및 목적

  • 테슬라 신기능인 커스텀 랩핑을 직접 디자인 할 수 없어서 개발하게됨

2. 주요 기능 및 사용 기술

ㄱ. 핵심 기술 스택

  • Framework: Next.js 14 (App Router)
  • Styling: Tailwind CSS
  • AI Engine: Google Generative AI (Gemini 3 Pro Image Preview)
  • Image Processing: Sharp (서버 사이드 마스크 합성 및 리사이징)

ㄴ. 사용자 주요 기능

  • 8종의 테슬라 모델 지원: Model 3 및 Model Y의 최신 라인업(2024, 2025 모델 등) 선택 가능
  • 멀티모달 디자인 가이드: 원하는 디자인만 입력하면 AI가 참고하여 디자인 생성
  • 실시간 미리보기 및 저장: 생성된 디자인을 즉시 확인하고 고화질 이미지로 다운로드 가능

3. 핵심 기술 구현 상세

ㄱ. 정교한 AI 프롬프트 엔지니어링

  • 차량의 유리창, 라이트, 로고 등 랩핑이 제외되어야 할 부분을 AI가 정확히 인식하도록 mask regions 지시문을 포함한 정교한 프롬프트를 설계
  • 이를 통해 차량의 실루엣을 유지하면서 차체 패널에만 디자인이 입혀지도록 제어

ㄴ. Sharp 라이브러리를 활용한 정밀 마스킹

  • AI가 생성한 원본 이미지의 불완전함을 보완하기 위해 Node.js 환경의 sharp 라이브러리를 사용
  • 원본 차량 템플릿의 밝기 값을 기준으로 마스크를 생성하고, AI 결과물을 해당 마스크에 맞춰 합성함으로써 실루엣이 깨지지 않는 깔끔한 결과물이 나옴

4. 프로젝트 성과 및 향후 계획

ㄱ. 프로젝트 성과

메인 페이지

  • 디자인 하고싶은 모델을 선택 스크린샷 2026-01-12 오후 8

스튜디오 페이지

  • 텍스트로 원하는 디자인을 입력스크린샷 2026-01-12 오후 8
  • 결과물을 확인후 다운로드 스크린샷 2026-01-12 오후 7

ㄴ. 향후 업데이트 계획

  • 2D 이미지를 넘어 Three.js를 활용한 3D 차량 래핑 미리보기 기능 도입 예정

5. 1차 서비스 결과

ㄱ. 1차 배포 이유

  • 네이버 카페 테슬라 커뮤니티에 1차로 게시글을 올렸음
  • 배포 테스트의 의미는 얼마나 많은사람들이 사이트에 방문할지 그리고 얼마나 많은 API를 사용하고, 그 비용이 얼마인지 알기 위해 배포함

ㄴ. 1차 배포의 성과

  • 카페 한곳에만 게시글을 올린결과 26년 1월 15일 오전 9시부터 11시까지 2시간동안
  • 방문자수 67명1
  • generativelanguage API 사용량 170건 비용 3만3천원2-1
  • 카페에 달린 사용자 반응3

ㄷ. 1차 배포의 결과

  • 광고를 많이붙이지 않는 이상** API 사용에 대한 과도한 비용**이 발생..

ㄹ. 개선사항

  • ㄱ. 회원가입, 로그인 기능을 도입해 가이드를 통해 유저가 직접 API를 발급받아 사용하게끔 유도.
  • ㄴ. 배너광고, 로딩생성시 동영상 광고 등을 붙여서 사이트를 유지하기.

ㅁ. 느낀점

  • 치킨 2마리값을 지불해야겠지만 처음으로 사람들에게 서비스를 제공하고 경험과 반응이 좋았다는게 아주 유의미한 프로젝트 였음! 다른 대책을 찾아서 빠르게 서비스를 복구할것
  • 현재는 비용문제로 기능을 잠시 막아두었음

댓글

Top