PastLife Today

전생의 오늘을 네 컷으로 기록하다

0. Overview

전생네컷은 사용자 사주 및 프로필 정보를 기반으로 전생 콘셉트의 4컷 이미지를 생성하는 웹 애플리케이션입니다.

• 사주/프로필 정보를 기반으로 전생 콘셉트의 4컷 이미지를 생성하는 웹앱 서비스
• S3 프리사인 URL 업로드로 클라이언트 직접 이미지 업로드 설계
• Polling 기반 비동기 이미지 생성으로 생성형 AI 파이프라인 구현

Demo

0F67E2B7-F299-49AA-8FFA-4465F5B560B7.1.1.1.mp4

---

1. Development Info

📌 Team

• Frontend: 1명

• Backend: 1명

• Cloud / Infra: 3명

• AI : 1명

• 역할: Frontend

  • 전체 사용자 플로우 및 화면 구조 설계
  • 비동기 생성 상태에 따른 UX 상태 관리
  • 공통 UI 컴포넌트 및 애니메이션 구현

📆 Development Period

• 기간: 2025.12 | 해커톤 프로젝트 (2박 3일)

---

2. Tech Stack

🔶 Language & Framework

     

🔶 Styling & UI

• CSS Modules

• 커스텀 애니메이션 및 배경 컴포넌트

  • StarField.tsx
  • AnimatedText.tsx

• 디자인 일관성을 고려한 컴포넌트 단위 스타일링

🔶 Font

• Geist (app/layout.tsx)

🔶 State & Network

• 인증 토큰: localStorage
• Fetch API 기반 네트워크 요청
• 환경 변수 미설정 시 더미 응답 처리

---

3. 아키텍처 설명 (Architecture)

3-1. Routing 구조

• /login : 로그인 및 이미지 생성 시작
• /signup : 회원가입 (프로필 이미지 포함)
• /image : 생성된 이미지 결과 조회
• 최소 라우팅으로 사용자 흐름을 단순화

---

3-2. S3 프리사인 URL 기반 업로드 아키텍처

회원가입 시 프로필 이미지는 서버를 거치지 않고 클라이언트에서 직접 업로드됩니다.

업로드 흐름

1. 이미지 파일 선택
2. POST /images/presigned-url
3. 프리사인 PUT URL 수신
4. 클라이언트 → S3 직접 PUT 업로드
5. 업로드된 image_url을 회원가입 DTO에 포함
6. POST /users 요청

sequenceDiagram
    participant User as 사용자
    participant FE as Frontend
    participant BE as Backend API
    participant S3 as S3 Storage

    User ->> FE: 이미지 파일 선택
    FE ->> BE: POST /images/presigned-url
    BE -->> FE: Presigned PUT URL 반환
    FE ->> S3: PUT 이미지 파일 (Presigned URL)
    S3 -->> FE: 업로드 성공
    FE ->> BE: POST /users (image_url 포함)
    BE -->> FE: 회원가입 완료

Loading

설계 의도

• 서버 부하 최소화
• 파일 업로드 보안 강화
• 실무에서 사용되는 업로드 패턴 경험

---

3-3. Polling 기반 이미지 생성 아키텍처

이미지 생성은 즉시 완료되지 않는 비동기 작업이므로 Polling 방식으로 처리했습니다.

생성 흐름

1. POST /gen 요청
2. polling_url 수신
3. 일정 주기로 상태 조회
4. 상태 SUCCEEDED 시 결과 URL 반환
5. /image 페이지로 이동하여 결과 표시

sequenceDiagram
    participant FE as Frontend
    participant BE as Backend API

    FE ->> BE: POST /gen
    BE -->> FE: polling_url 반환

    loop Polling (주기적 상태 확인)
        FE ->> BE: GET /gen/polling/{job_id}
        BE -->> FE: status = PENDING / PROCESSING
    end

    BE -->> FE: status = SUCCEEDED<br/>image_url 반환
    FE ->> FE: /image 페이지로 이동<br/>(결과 이미지 표시)

Loading

설계 의도

• 생성 대기 UX 확장 가능
• 생성형 AI 파이프라인과 유사한 구조

---

3-4. FE–BE–AI–S3 전체 시스템 흐름

• 프론트엔드는 파일 업로드와 생성 요청을 담당하고,
• 백엔드는 인증·작업 관리·AI 호출을 중개하며,
• 이미지는 S3를 통해 직접 저장·서빙됩니다.

sequenceDiagram
    participant User as User
    participant FE as Frontend (Next.js)
    participant BE as Backend API (Spring Boot)
    participant AI as AI Image Generator
    participant S3 as S3 Storage

    %% 회원가입 & 이미지 업로드
    User ->> FE: 회원가입 정보 입력
    FE ->> BE: POST /images/presigned-url
    BE -->> FE: Presigned PUT URL
    FE ->> S3: PUT 프로필 이미지
    S3 -->> FE: 업로드 완료
    FE ->> BE: POST /users (image_url 포함)

    %% 로그인 & 이미지 생성
    User ->> FE: 로그인
    FE ->> BE: POST /auth/login
    BE -->> FE: Access Token

    User ->> FE: 전생 네컷 생성 요청
    FE ->> BE: POST /gen
    BE ->> AI: 이미지 생성 작업 요청
    BE -->> FE: polling_url 반환

    %% Polling
    loop Polling
        FE ->> BE: GET /gen/polling/{job_id}
        BE -->> FE: status = PROCESSING
    end

    BE ->> S3: 생성된 이미지 저장
    BE -->> FE: status = SUCCEEDED + image_url
    FE ->> FE: /image 페이지에서 결과 표시

Loading

---

4. API Overview

목적	Method	Endpoint
로그인	POST	/auth/login
회원가입	POST	/users
프리사인 URL 발급	POST	/images/presigned-url
이미지 생성 요청	POST	/gen
생성 상태 조회	GET	/gen/polling/{job_id}

---

5. UI/UX 설계 포인트

5-0. Screen Flow (화면 설계)

5-1. 사용자 흐름 최소화

• 로그인 → 생성 → 결과 확인의 단일 핵심 플로우
• 불필요한 페이지 이동 최소화

5-2. 비동기 대기 UX 고려

• 이미지 생성 Polling 중 로딩 상태 명확히 표시
• 사용자가 “무언가 생성 중”임을 인지할 수 있도록 설계

5-3. 시각적 몰입 강화

• 별 배경, 애니메이션 텍스트 등으로 전생 콘셉트에 맞는 분위기 연출
• 결과 이미지를 중심으로 한 화면 구성

---

6. 주요 기능 (Features)

• 로그인

  • 이메일/비밀번호 기반 인증
  • 토큰을 localStorage에 저장

• 회원가입

  • 기본 정보 + 선택적 프로필 이미지
  • 프리사인 URL 기반 이미지 업로드

• 전생 네컷 이미지 생성

  • 비동기 생성 요청
  • Polling 방식으로 생성 상태 확인

• 결과 이미지 조회

  • 생성 완료 후 이미지 결과 페이지 제공
  • URL 기반 접근

---

🎉 Thanks for reading!