• 신영선
• 기본 과정
• 힉스필드

힉스필드 앱 이렇게 써보세요.

인생네컷? 찍을 필요 없습니다.

2026-07-10

1. 릴스 영상을 저장 또는 공유하기로 기록 해놓습니다.
2. DM으로 받은 링크를 카톡으로 옮겨 놓습니다.
3. PC로 접속해서 AI 즐겨찾기 폴더를 만들어 저장해놓습니다.
4. 바로 사용을 해봅니다. 절대 미루지 마세요. (⭐ 제일 중요)

1. 힉스필드 웹사이트

2. 프롬프트

나는 사용자가 본인 사진 1장과 다른 사람 사진 1장, 총 2장의 사진을 업로드하면 두 사람을 활용해 인생네컷 스타일의 프레임 이미지를 자동으로 만들어주는 웹앱을 만들고 싶다.

서비스의 핵심 목표는 다음과 같다.

1. 사용자가 사진 2장을 업로드한다.
2. 앱은 두 사진 속 인물을 각각 인식한다.
3. 두 사람을 자연스럽게 하나의 인생네컷 프레임 안에 배치한다.
4. 결과물은 세로형 4컷 포토부스 스타일 이미지로 생성된다.
5. 사용자는 완성된 이미지를 다운로드하거나 공유할 수 있다.

앱 이름은 임시로 “AI 인생네컷 메이커”로 한다.

MVP 기준으로 다음 기능을 구현해줘.

1. 핵심 사용자 플로우

사용자 플로우는 다음과 같다.

1. 랜딩 페이지 진입
2. 서비스 설명 확인
3. 본인 사진 업로드
4. 상대방 사진 업로드
5. 프레임 스타일 선택
6. 생성 버튼 클릭
7. 로딩 화면 표시
8. AI가 두 사람을 활용한 인생네컷 결과 이미지 생성
9. 결과 미리보기
10. 이미지 다운로드
11. 다시 만들기

2. 화면 구성

A. 랜딩 화면

포함 요소:

• 서비스명: AI 인생네컷 메이커
• 헤드라인: “사진 2장만 올리면, 우리 둘의 인생네컷 완성”
• 서브카피: “본인 사진과 상대방 사진을 업로드하면 AI가 자연스러운 4컷 포토부스 이미지를 만들어드립니다.”
• CTA 버튼: “사진 업로드하고 만들기”
• 예시 결과 이미지 영역
• 주의 문구: “본인 또는 사용 권한이 있는 사진만 업로드해주세요.”

B. 사진 업로드 화면

포함 요소:

• 본인 사진 업로드 영역
• 상대방 사진 업로드 영역
• 업로드 가능 형식: JPG, PNG, WEBP
• 최대 용량: 10MB
• 업로드된 이미지 미리보기
• 사진 변경 버튼
• 다음 버튼

예외 처리:

• 이미지가 아닌 파일 업로드 시 에러 메시지 출력
• 10MB 초과 시 에러 메시지 출력
• 한 장만 업로드한 상태에서는 다음 단계로 이동 불가
• 얼굴이 감지되지 않는 경우 “얼굴이 잘 보이는 사진을 다시 업로드해주세요.” 메시지 출력

C. 프레임 스타일 선택 화면

사용자가 선택할 수 있는 스타일은 MVP 기준으로 5개 제공한다.

1. 기본 화이트 프레임
2. 핑크 데이트 프레임
3. 블랙 시크 프레임
4. Y2K 스티커 프레임
5. 생일 축하 프레임

각 스타일은 카드 형태로 보여준다.

각 카드에는 다음 요소가 있다.

• 스타일명
• 미리보기 썸네일
• 간단 설명
• 선택 상태 표시

D. 생성 로딩 화면

포함 요소:

• 로딩 애니메이션
• 문구: “AI가 두 사람의 인생네컷을 만들고 있어요.”
• 보조 문구: “보통 10~30초 정도 걸릴 수 있습니다.”
• 진행 단계 텍스트:
• 사진 분석 중
• 인물 배치 중
• 프레임 적용 중
• 최종 이미지 생성 중

E. 결과 화면

포함 요소:

• 완성된 인생네컷 이미지 미리보기
• 다운로드 버튼
• 다시 만들기 버튼
• 다른 프레임으로 다시 생성 버튼
• 공유 버튼

3. 이미지 생성 결과물 요구사항

결과 이미지는 다음 조건을 만족해야 한다.

• 세로형 인생네컷 포토부스 스타일
• 4개의 컷이 위에서 아래로 배치
• 각 컷마다 두 사람이 함께 있는 것처럼 자연스럽게 구성
• 원본 얼굴의 특징은 최대한 유지
• 과도하게 왜곡되거나 다른 사람처럼 보이지 않게 처리
• 배경은 프레임 스타일에 맞게 자동 적용
• 하단에는 작은 텍스트 영역을 둔다
• 기본 문구는 “OUR PHOTO BOOTH”로 한다
• 사용자가 원하면 문구를 수정할 수 있게 추후 확장 가능하도록 구조 설계

4. 이미지 생성 프롬프트 설계

AI 이미지 생성 API에 전달할 프롬프트는 다음 구조를 기반으로 만든다.

“Create a vertical Korean photo booth style 4-cut photo strip featuring two people based on the uploaded reference images. Preserve each person's facial identity, hairstyle, and key facial features as much as possible. Make them appear naturally together in each of the four frames, with different cute poses and expressions. Use a clean [선택한 프레임 스타일] frame design. The final image should look like a modern Korean ‘Life4Cuts’ photo booth print, with four stacked photos, soft studio lighting, natural skin tones, high-quality realistic rendering, and a polished social media friendly look. Add a small bottom caption that says ‘OUR PHOTO BOOTH’. Do not alter the identity too much. Do not make the faces look artificial. Do not create extra people.”

프레임 스타일별 프롬프트 변형:

기본 화이트 프레임

Clean white minimalist photo booth frame, soft neutral background, simple modern Korean studio look.

핑크 데이트 프레임

Cute pink romantic date photo booth frame, soft heart stickers, warm pastel background, lovely couple-like mood.

블랙 시크 프레임

Stylish black premium photo booth frame, monochrome accents, fashion editorial mood, clean contrast, sophisticated look.

Y2K 스티커 프레임

Playful Y2K Korean sticker photo booth frame, colorful doodles, stars, hearts, retro digital sticker decorations.

생일 축하 프레임

Birthday celebration photo booth frame, balloons, confetti, cake stickers, cheerful party mood, bright warm lighting.

5. 기술 스택 제안

MVP는 빠르게 만들 수 있도록 다음 스택을 사용한다.

Frontend:

• Next.js
• React
• Tailwind CSS
• shadcn/ui

Backend:

• Next.js API Routes 또는 Supabase Edge Functions

Storage:

• Supabase Storage 또는 Cloudflare R2

Database:

• Supabase PostgreSQL

AI Image Generation:

• OpenAI Images API 또는 Replicate 기반 이미지 생성 모델
• 추후 얼굴 보존 성능이 더 좋은 모델로 교체 가능하게 추상화

Authentication:

• MVP에서는 비회원 사용 가능
• 추후 로그인, 생성 이력, 크레딧 시스템 추가

Payment:

• MVP 이후 Toss Payments 또는 Stripe 연동 가능

6. 데이터베이스 구조

다음 테이블을 설계한다.

generations

필드:

• id
• user_id nullable
• original_image_1_url
• original_image_2_url
• selected_frame_style
• generated_image_url
• status
• error_message
• created_at
• updated_at

status 값:

• pending
• processing
• completed
• failed

7. API 설계

POST /api/upload

역할:

• 사용자 이미지 업로드
• 파일 검증
• 스토리지 저장
• 업로드 URL 반환

요청:

• image file

응답:

• image_url

POST /api/generate

역할:

• 업로드된 이미지 2장과 프레임 스타일을 받아 이미지 생성 요청
• generation record 생성
• AI 이미지 생성 API 호출
• 생성된 이미지 저장
• 결과 URL 반환

요청:

• image_1_url
• image_2_url
• frame_style

응답:

• generation_id
• generated_image_url
• status

GET /api/generation/:id

역할:

• 생성 상태 확인
• 결과 이미지 URL 반환

응답:

• id
• status
• generated_image_url
• error_message

8. 정책 및 안전장치

서비스에는 다음 안전장치를 포함한다.

• 사용자가 업로드한 사진에 대한 사용 권한을 가지고 있다는 안내 문구 표시
• 타인의 사진을 무단으로 사용하지 말라는 안내 문구 표시
• 미성년자, 성적 이미지, 폭력적 이미지, 불법적 이미지 생성 방지
• 업로드 이미지는 일정 시간 후 자동 삭제할 수 있도록 설계
• 결과물은 사용자가 직접 다운로드하기 전까지 공개되지 않음
• 신고 기능은 추후 확장 가능하도록 고려

9. UI 디자인 방향

디자인 톤앤매너:

• 모바일 우선
• 20대 사용자가 좋아할 만한 감성
• 심플하고 직관적인 UX
• 포토부스, 데이트, 친구, 생일, 커플 감성
• 흰색 배경 기반
• 포인트 컬러는 핑크 또는 퍼플
• 버튼은 둥글고 부드러운 형태
• 결과 이미지를 가장 크게 보여주는 구조

10. MVP 구현 우선순위

1순위:

• 사진 2장 업로드
• 프레임 스타일 선택
• 이미지 생성
• 결과 미리보기
• 다운로드

2순위:

• 생성 이력 저장
• 다른 프레임으로 재생성
• 모바일 공유
• 커스텀 문구 입력

3순위:

• 로그인
• 크레딧 결제
• 워터마크 제거 유료화
• 프리미엄 프레임
• 친구 초대 리워드
• SNS 공유 이벤트

11. 코드 작성 요구사항

다음 기준으로 코드를 작성해줘.

• Next.js App Router 기반으로 구현
• TypeScript 사용
• Tailwind CSS 사용
• 컴포넌트 단위로 구조화
• 업로드, 스타일 선택, 생성 결과 화면을 명확히 분리
• API 호출 로직은 별도 함수로 분리
• 에러 처리 포함
• 로딩 상태 포함
• 모바일 반응형 UI 구현
• 추후 결제/로그인/크레딧 시스템 확장이 쉬운 구조로 작성

12. 폴더 구조 제안

다음 구조로 프로젝트를 설계해줘.

app/

page.tsx

upload/page.tsx

result/[id]/page.tsx

api/upload/route.ts

api/generate/route.ts

api/generation/[id]/route.ts

components/

UploadCard.tsx

FrameStyleCard.tsx

GenerationLoading.tsx

ResultPreview.tsx

CTAButton.tsx

lib/

image-generation.ts

storage.ts

db.ts

validations.ts

types/

generation.ts

frame-style.ts

constants/

frame-styles.ts

prompts.ts

13. 최종 산출물

먼저 전체 서비스 구조와 구현 계획을 설명해줘.

그 다음 MVP 개발에 필요한 파일 구조를 만들고, 각 파일별 코드를 작성해줘.

코드는 실제로 실행 가능한 수준으로 작성해줘.

단, 이미지 생성 API 키나 Supabase 키는 .env.local에서 관리하도록 하고, 예시는 다음처럼 사용해줘.

OPENAI_API_KEY=

NEXT_PUBLIC_SUPABASE_URL=

NEXT_PUBLIC_SUPABASE_ANON_KEY=

SUPABASE_SERVICE_ROLE_KEY=

최종적으로 내가 해야 할 실행 명령어도 알려줘.

예:

npm install

npm run dev

3. 작업 결과물

이렇게 나와요!