ALBERT SITE

z-image 를 이용한 AI 이미지 생성 홈페이지 만들기

Posted by Albert 10Day 18Hour 20Min 26Sec ago [2025-12-05]

요즘 z-image 가 핫하다길래 활용하여 간단히 웹상 이미지 생성 ai포털 만들어 봤다.

간단히 결론부터 말하자면 이미지 생성이든 음악생성이든 에이젠트 서버의 GPU가 빵빵해야 한다.

나는 M1칩 Mac Studio MX로 하였는데 이미지 하나 생성하는데 거의 5분이상걸린다. ㅜㅜ

이것도 z-image 가 6B타입으로 타 이미지 생성AI보다 많이 빠른것이 현재 5분이라는거다.

이제 한 1년뒤면 아마 많이 빨라질 수 도 있겟지 뭐 ㅎㅎ

그래도 생성한 이미지는 퀄리티가 너무좋고 무었보다 공짜로 이미지 생성 AI를 무제한으로 사용할 수 있다는것만으로 완전 대박이다.

Z-Image: 단 1스텝으로 고품질 이미지 생성! (M1/M2 Mac 최적화)

주요 기능

이미지 생성

Z-Image 통합: 초고속 이미지 생성 (1-5초)
Text-to-Image: 텍스트 설명만으로 이미지 생성
Image-to-Image: 참고 이미지의 캐릭터/스타일 유지하며 새 이미지 생성
다양한 종횡비: Square, Landscape, Portrait, Wide, Tall 지원
드래그 앤 드롭: Gemini 스타일의 이미지 첨부 (드래그, 붙여넣기)

사용자 인증

JWT 기반 인증: 안전한 사용자 인증 시스템
사용자 관리: MariaDB 기반 사용자 계정 관리
로그인/로그아웃: 세션 관리 및 보안 토큰

프로필 관리

프로필 이미지: 사용자 프로필 이미지 업로드 및 관리
이미지 즉시 업데이트: 업로드 시 실시간 반영
비밀번호 변경: 현재 비밀번호 확인 후 안전한 변경
프로필 드롭다운: 네비게이션 바에서 빠른 접근

이미지 관리 (MyPictures)

생성 기록 저장: 모든 생성 이미지 자동 저장
이미지 갤러리: 그리드 레이아웃으로 이미지 목록 표시
상세 보기: 클릭하여 큰 모달에서 이미지 확인
프롬프트 복사: 생성에 사용된 프롬프트 복사 기능
이미지 다운로드: 생성된 이미지 다운로드
이미지 삭제: 불필요한 이미지 삭제 기능

UI/UX

VS Code 스타일 UI: 개발자 친화적인 다크 테마 인터페이스
실시간 상태 표시: 연결 상태 및 생성 진행 상황 표시
직관적인 네비게이션: Generate, MyPictures 탭 전환
M1/M2 Mac 최적화: MPS 가속으로 최고 성능

기술 스택

Frontend

Vue 3 - 프로그레시브 JavaScript 프레임워크
Vue Router - SPA 라우팅
Vite - 차세대 프론트엔드 빌드 툴
Axios - HTTP 클라이언트

Backend

FastAPI - 고성능 Python 웹 프레임워크
Z-Image - Tongyi-MAI의 초고속 이미지 생성 모델
PyTorch - 딥러닝 프레임워크
Diffusers - Hugging Face의 확산 모델 라이브러리
Pillow - 이미지 처리 라이브러리

Database & Auth

MariaDB - 사용자 및 이미지 데이터 저장
JWT - JSON Web Token 기반 인증
bcrypt - 비밀번호 해싱

프로젝트 구조

z-image/
├── frontend/ ' Vue 3 프론트엔드
│ ├── src/
│ │ ├── components/
│ │ │ └── NavBar.vue ' 공통 네비게이션 바
│ │ ├── views/
│ │ │ ├── Login.vue ' 로그인 페이지
│ │ │ ├── Generator.vue ' 이미지 생성 페이지
│ │ │ ├── MyPictures.vue ' 이미지 갤러리 페이지
│ │ │ └── Profile.vue ' 프로필 설정 페이지
│ │ ├── router/
│ │ │ └── index.js ' Vue Router 설정
│ │ ├── App.vue ' 메인 컴포넌트
│ │ ├── main.js ' 앱 엔트리 포인트
│ │ └── style.css ' 글로벌 스타일
│ ├── index.html
│ ├── vite.config.js ' Vite 설정
│ ├── package.json
│ └── start.sh ' 시작 스크립트
├── backend/ ' FastAPI 백엔드
│ ├── main.py ' FastAPI 앱
│ ├── auth.py ' JWT 인증 모듈
│ ├── database.py ' 데이터베이스 연결
│ ├── create_user.py ' 사용자 생성 스크립트
│ ├── schema.sql ' 데이터베이스 스키마
│ ├── migration.sql ' 프로필 이미지 마이그레이션
│ ├── requirements.txt ' Python 의존성
│ ├── .env.example ' 환경 변수 예제
│ └── start.sh ' 시작 스크립트
├── .gitignore
└── README.md

빠른 시작

1. 데이터베이스 설정

MariaDB에 접속하여 데이터베이스와 테이블을 생성합니다:

mysql -u root -p

-- 데이터베이스 생성
CREATE DATABASE albert CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE albert;

-- 사용자 테이블
CREATE TABLE `users` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `username` varchar(50) NOT NULL,
 `hashed_password` varchar(255) NOT NULL,
 `profile_image` varchar(500) DEFAULT NULL,
 `created_at` timestamp NOT NULL DEFAULT current_timestamp(),
 PRIMARY KEY (`id`),
 UNIQUE KEY `username` (`username`),
 KEY `username_2` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- 이미지 생성 기록 테이블
CREATE TABLE `generated_images` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `user_id` int(11) NOT NULL,
 `prompt` text NOT NULL,
 `image_url` varchar(500) NOT NULL,
 `width` int(11) NOT NULL DEFAULT 1024,
 `height` int(11) NOT NULL DEFAULT 1024,
 `aspect_ratio` varchar(50) DEFAULT NULL,
 `created_at` timestamp NOT NULL DEFAULT current_timestamp(),
 PRIMARY KEY (`id`),
 KEY `user_id` (`user_id`),
 KEY `created_at` (`created_at`),
 KEY `idx_user_created` (`user_id`, `created_at` DESC),
 CONSTRAINT `generated_images_ibfk_1` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

2. Backend 설정

cd backend

' 가상환경 생성 및 활성화
python3 -m venv venv
source venv/bin/activate ' Windows: venv\Scripts\activate

' 의존성 설치
pip install -r requirements.txt

' 환경 변수 설정
cp .env.example .env
' .env 파일을 열어 데이터베이스 정보 입력

.env 파일 설정:

' API 설정
API_HOST=0.0.0.0
API_PORT=8000
CORS_ORIGINS=http://localhost:5173,http://localhost:3000

' 이미지 저장 경로
UPLOAD_DIR=./uploads
OUTPUT_DIR=./generated_images

' 최대 파일 크기 (bytes)
MAX_FILE_SIZE=10485760

' Database 설정
DB_HOST=localhost
DB_PORT=3306
DB_USER=your_db_user
DB_PASSWORD=your_db_password
DB_NAME=your_db_name

' JWT 설정
JWT_SECRET_KEY=your-secret-key-change-this-in-production
JWT_ALGORITHM=HS256
JWT_ACCESS_TOKEN_EXPIRE_MINUTES=1440

테스트 사용자 생성:

' 가상환경 활성화 상태에서
python create_user.py admin admin123

서버 시작:

./start.sh

백엔드 서버는 http://localhost:8000에서 실행됩니다.

3. Frontend 설정

새 터미널에서:

cd frontend

' 의존성 설치
npm install

' 개발 서버 시작
npm run dev

프론트엔드는 http://localhost:5173에서 실행됩니다.

사용 방법

이미지 생성 (Generate)

프롬프트 입력: 생성하고 싶은 이미지를 텍스트로 설명
종횡비 선택: Square, Landscape, Portrait, Wide, Tall 중 선택
참고 이미지 업로드 (선택사항): 드래그 앤 드롭 또는 붙여넣기
Generate Image 클릭: 이미지 생성 시작
결과 확인: 생성된 이미지가 오른쪽 패널에 표시

이미지 관리 (MyPictures)

MyPictures 탭 클릭: 생성된 모든 이미지 확인
이미지 클릭: 큰 모달에서 상세 보기
프롬프트 복사: 복사 버튼으로 프롬프트 재사용
이미지 다운로드: 다운로드 버튼으로 이미지 저장
이미지 삭제: 삭제 버튼으로 불필요한 이미지 제거

프로필 관리

프로필 메뉴 접근: 우측 상단 프로필 아이콘 클릭
프로필 페이지: Profile 메뉴 선택
프로필 이미지 변경: 이미지 클릭하여 새 이미지 업로드 (JPG, PNG, WebP, 최대 5MB)
비밀번호 변경: 현재 비밀번호 입력 후 새 비밀번호 설정
로그아웃: Sign out 메뉴로 로그아웃

API 엔드포인트

인증

POST /api/auth/login - 로그인
GET /api/auth/verify - 토큰 검증
POST /api/auth/logout - 로그아웃

프로필 관리

GET /api/auth/profile - 프로필 조회
PUT /api/auth/profile - 프로필 업데이트
PUT /api/auth/change-password - 비밀번호 변경
POST /api/auth/upload-profile-image - 프로필 이미지 업로드

이미지 생성

POST /api/upload-reference - 참고 이미지 업로드
POST /api/generate - 이미지 생성 (width, height 파라미터 지원)

이미지 관리

GET /api/my-images - 사용자의 생성 이미지 목록 조회
DELETE /api/images/{image_id} - 이미지 삭제

시스템

GET / - API 정보
GET /health - 헬스 체크

API 문서: http://localhost:8000/docs

개발 팁

사용자 생성

cd backend
source venv/bin/activate
python create_user.py <username> <password>

데이터베이스 초기화

mysql -u your_user -p albert < schema.sql

로그 확인

Backend: 터미널에서 실시간 로그 확인
Frontend: 브라우저 개발자 도구 콘솔

Github: https://github.com/visionboy/z-image

LIST