현행 문제: 구식 레이아웃, 비통일된 상세페이지, 모바일 최적화 미흡, 브랜드 정체성 부재
네비게이션: /sub01/sub01_01.html 등 정적 HTML 경로 구조
핵심 요구사항 분석
UI/UX 디자인 전면 리뉴얼 — 메인 페이지, 카테고리 페이지, 공통 컴포넌트(GNB, 푸터) 전체 재설계
다채널 상세페이지 제작 — 쿠팡, 네이버 스마트스토어 등 판매 채널에 최적화된 상세페이지 약 20종 디자인
브랜드 아이덴티티 수립 — 축산물 전문 쇼핑몰의 프리미엄 이미지에 맞는 컬러, 타이포그래피, 비주얼 시스템
퍼블리싱 미포함 — 순수 디자인 시안 납품 (Figma 원본 + 이미지 에셋)
반응형 대응 — PC/모바일 양방향 디자인 시안 제작
제안 포인트
참고 사이트(gachunpork1.co.kr) 분석 결과, 현재 사이트는 Apache 기반 정적 HTML로 구성되어 있으며 28개 카테고리에 약 20종 상품이 등록되어 있습니다. 디자인 리뉴얼 시 다음과 같은 전략을 제안합니다:
마스터 템플릿 접근 — 28개 카테고리를 3~4종 마스터 템플릿으로 그룹화하여 일관성과 효율성 확보
상세페이지 모듈 시스템 — 상품 특성(부위, 등급, 용도)에 맞는 모듈형 상세페이지 구조로 약 20종을 체계적으로 제작
다채널 최적화 — 쿠팡/스마트스토어 등 각 채널의 이미지 규격과 가이드라인에 맞춘 에셋 별도 제공
유사 프로젝트 경험 — P2P 펀딩 플랫폼 UI/UX 전면 리뉴얼, 50+ 페이지 규모 B2B SaaS 디자인, 6개 플랫폼 대응 멀티플랫폼 디자인 경험 보유
사용 도구
디자인 도구
FigmaPhotoshopIllustratorFigma Auto LayoutFigma Components
협업 및 커뮤니케이션
Slack / 카카오톡Zoom / Google MeetNotionFigma 코멘트
견적서
본 견적서는 프로젝트 요구사항 분석을 기반으로 산출되었습니다.
견적 요약
항목
내용
프로젝트명
축산물 쇼핑몰 UI/UX 디자인 리뉴얼 및 다채널 상세페이지 제작
제안 금액
720만원 (VAT 별도)
제안 기간
60일
견적 유효기간
제안일로부터 30일
상세 견적 내역
구분
항목
수량
단가
금액
기획
요구사항 분석 및 디자인 전략 수립
1식
-
80만원
메인 디자인
메인 페이지 UI/UX 디자인 (PC/모바일)
1식
-
120만원
서브 디자인
카테고리 페이지(28개) 마스터 템플릿 + 변형
1식
-
160만원
상세페이지
약 20종 상품 상세페이지 + 다채널 최적화
1식
-
200만원
공통 디자인
GNB, 푸터, 공통 컴포넌트, 회원/주문 페이지
1식
-
100만원
디자인 시스템
스타일 가이드, 컴포넌트 라이브러리, 퍼블리싱 가이드
1식
-
60만원
합계 (VAT 별도)
720만원
산정 근거
28개 카테고리를 마스터 템플릿 3~4종으로 그룹화하여 효율적 제작
약 20종 상품 상세페이지는 모듈형 구조로 통일성 확보 + 상품별 개별 커스터마이징
다채널(쿠팡, 네이버 스마트스토어 등) 규격별 에셋 변환 작업 포함
유사 프로젝트(커머스 UI/UX 리뉴얼) 수행 경험 기반 효율적 진행
포함 사항
Figma 디자인 원본 파일 전체 이관
디자인 시스템 (컬러, 타이포그래피, 컴포넌트 라이브러리)
퍼블리싱 가이드 문서 (간격, 폰트, 컬러코드 명세)
다채널 상세페이지 이미지 에셋 (쿠팡/스마트스토어 규격)
PC/모바일 반응형 디자인 시안
1회 무상 수정 (시안 확정 후)
불포함 사항
HTML/CSS 퍼블리싱 (코딩 작업)
서버 이전 및 도메인 설정
상품 사진 촬영 및 리터칭
동영상 제작 및 모션 그래픽
쇼핑몰 솔루션(카페24, 고도몰 등) 세팅
공수계산서
디자인 작업별 공수(Man-Day)를 산출하여 일정과 비용의 근거를 제시합니다.
공수 요약
구분
공수 (M/D)
비율
리서치 및 기획
5 M/D
10%
메인 페이지 디자인
7 M/D
14%
카테고리/서브 페이지 디자인
10 M/D
20%
상품 상세페이지 디자인
14 M/D
29%
공통 컴포넌트 및 회원/주문 페이지
6 M/D
12%
디자인 시스템 및 퍼블리싱 가이드
3 M/D
6%
클라이언트 리뷰 및 수정
4 M/D
8%
합계
49 M/D
100%
기능별 상세 공수
작업
세부 내용
담당
공수 (M/D)
리서치 및 기획
현행 사이트 분석 및 벤치마킹
기획
2
디자인 전략 수립 및 무드보드
기획
1.5
와이어프레임 (주요 페이지)
기획
1.5
메인 페이지 디자인
메인 히어로 및 GNB/푸터 디자인
디자인
3
메인 섹션별 디자인 (카테고리, 베스트, 이벤트)
디자인
2.5
모바일 반응형 디자인
디자인
1.5
카테고리/서브 페이지
마스터 템플릿 3~4종 디자인 (PC/모바일)
디자인
6
28개 카테고리 적용 및 변형
디자인
4
상품 상세페이지
상세페이지 마스터 레이아웃 (부위/등급별)
디자인
4
약 20종 상품별 상세페이지 제작
디자인
7
다채널(쿠팡/스마트스토어) 규격 변환
디자인
3
공통 컴포넌트
회원가입, 로그인, 마이페이지 디자인
디자인
3
장바구니, 주문/결제, 주문완료 디자인
디자인
3
디자인 시스템
스타일 가이드 + 컴포넌트 라이브러리 + 퍼블리싱 가이드
디자인
3
리뷰 및 수정
클라이언트 피드백 반영 및 디자인 수정 (2회차)
디자인
4
산정 기준
1 M/D = 8시간 기준 (1인 1일 작업량)
주 5일 근무 기준
28개 카테고리를 마스터 템플릿 그룹화하여 효율화
유사 프로젝트(커머스 UI/UX 리뉴얼) 수행 경험 기반 산정
PRD (디자인 요구사항 정의서)
디자인 요구사항을 정의하고 작업 범위를 명확히 합니다.
1. 프로젝트 배경 및 목적
가천포크(gachunpork1.co.kr)는 한우, 한돈, 선물세트를 판매하는 축산물 전문 쇼핑몰입니다. 현재 사이트는 Apache 기반의 정적 HTML로 구성되어 있으며, 구식 레이아웃과 비통일된 상세페이지로 인해 프리미엄 축산물 브랜드에 걸맞은 사용자 경험을 제공하지 못하고 있습니다.
본 프로젝트의 목표는:
프리미엄 축산물 브랜드에 어울리는 신뢰감 있는 쇼핑 경험 디자인
28개 카테고리와 약 20종 상품에 대한 체계적이고 통일된 UI/UX 수립
쿠팡, 네이버 스마트스토어 등 다채널 판매를 위한 상세페이지 에셋 제공
2. 사용자 정의
사용자 유형
설명
주요 접점
일반 고객 (PC)
검색/광고를 통해 유입되는 구매 희망 고객
메인, 카테고리, 상세페이지, 장바구니, 결제
일반 고객 (모바일)
모바일 기기로 접속하는 고객 (비중 증가 추세)
동일 — 터치 최적화 필요
다채널 고객
쿠팡, 네이버 스마트스토어에서 상품을 접하는 고객
상품 상세페이지 (이미지 중심)
쇼핑몰 관리자
상품/주문/회원을 관리하는 내부 운영자
관리자 페이지 (디자인 범위 외)
3. 디자인 요구사항
3.1 메인 페이지 리뉴얼
[필수] 히어로 영역 — 브랜드 이미지 + 주요 프로모션 배너
[필수] GNB(Global Navigation Bar) — 한우/한돈/선물세트 카테고리 구조
[필수] 베스트 상품, 신상품, 이벤트 섹션
[필수] 푸터 — 사업자 정보, 고객센터, SNS 링크
[선택] 브랜드 스토리 영역
3.2 카테고리 페이지 (28개)
[필수] 한우 카테고리 (11개): 등심, 안심, 채끝, 갈비, 불고기, 국거리 등
[필수] 한돈 카테고리 (10개): 삼겹살, 목살, 갈비, 앞다리, 뒷다리 등
[필수] 선물세트 카테고리 (7개): 한우세트, 한돈세트, 혼합세트 등
[필수] 마스터 템플릿 3~4종으로 그룹화하여 일관된 레이아웃
3.3 상품 상세페이지 (~20종)
[필수] 상품 정보 영역 (이미지, 가격, 옵션, 구매 버튼)
[필수] 상세 설명 영역 (부위 설명, 등급, 원산지, 보관법)
[필수] 다채널 최적화 — 쿠팡(860px), 스마트스토어(860px) 규격 별도 제작
[선택] 리뷰/후기 영역 디자인
3.4 공통/회원 페이지
[필수] 회원가입, 로그인 페이지
[필수] 마이페이지 (주문내역, 회원정보)
[필수] 장바구니, 주문/결제, 주문완료 페이지
4. 비기능 요구사항
항목
요구사항
반응형
PC(1920px 기준), 모바일(375px 기준) 2 breakpoint 디자인
접근성
WCAG 2.1 AA 기준 컬러 대비, 터치 영역 최소 44px
브랜드 일관성
디자인 시스템(컬러, 타이포, 아이콘, 간격) 정의 및 문서화
다채널 호환
쿠팡/스마트스토어 이미지 가이드라인 준수
퍼블리싱 편의
Auto Layout 기반 Figma 구조, 네이밍 컨벤션, 에셋 export 설정
5. 기술 제약사항
현행 사이트가 정적 HTML 기반이므로, 디자인 시안은 쇼핑몰 솔루션(카페24, 고도몰 등) 또는 커스텀 퍼블리싱 모두에 대응 가능하도록 범용적으로 제작
상세페이지 이미지는 단일 이미지 포맷(JPG/PNG)으로 납품하여 어떤 플랫폼에도 업로드 가능
Figma 원본은 Auto Layout과 Component 기반으로 구성하여 퍼블리셔의 작업 효율 보장
6. 범위 외 사항 (Out of Scope)
HTML/CSS 퍼블리싱 및 개발 작업
쇼핑몰 솔루션 세팅 및 마이그레이션
서버 이전 및 도메인 설정
상품 사진 촬영 및 리터칭
관리자 페이지 디자인
결제/PG 시스템 관련 기능
일정 제안
총 60일 기준 단계별 마일스톤 및 산출물을 제안합니다.
전체 일정 요약
단계
기간
주요 산출물
Phase 1: 리서치 & 기획
Day 1–10
벤치마킹 보고서, 무드보드, 와이어프레임
Phase 2: 메인 디자인
Day 11–24
메인 페이지, GNB/푸터, 디자인 시스템 초안
Phase 3: 서브 페이지 디자인
Day 25–38
카테고리 마스터 템플릿, 회원/주문 페이지
Phase 4: 상세페이지 제작
Day 39–52
~20종 상세페이지, 다채널 에셋
Phase 5: 검수 및 납품
Day 53–60
디자인 시스템 완성, 퍼블리싱 가이드, 최종 납품
상세 타임라인
PHASE 1
리서치 & 기획
Day 1–10
현행 사이트 심층 분석, 경쟁사 벤치마킹, 디자인 전략 수립, 무드보드 및 와이어프레임 제작
산출물: 벤치마킹 보고서, 무드보드, 와이어프레임 (주요 페이지)
클라이언트 확인: 디자인 방향성 컨펌
PHASE 2
메인 디자인
Day 11–24
메인 페이지 UI/UX 디자인(PC/모바일), GNB·푸터 공통 컴포넌트, 디자인 시스템 초안(컬러, 타이포, 아이콘)
산출물: 메인 페이지 시안 (PC/모바일), 디자인 시스템 초안
클라이언트 확인: 메인 시안 컨펌 → 이후 단계 진행
PHASE 3
서브 페이지 디자인
Day 25–38
카테고리 마스터 템플릿 3~4종 디자인 후 28개 카테고리 적용, 회원가입/로그인/마이페이지/장바구니/주문 페이지 디자인
산출물: 카테고리 마스터 템플릿, 28개 카테고리 페이지, 회원/주문 페이지
병렬 진행: 메인 시안 컨펌 후 카테고리 + 공통 페이지 동시 진행
PHASE 4
상세페이지 제작
Day 39–52
약 20종 상품별 상세페이지 디자인, 부위/등급/용도에 맞는 모듈 조합, 쿠팡/스마트스토어 규격 에셋 변환
산출물: ~20종 상품 상세페이지, 다채널 이미지 에셋
효율화: 마스터 레이아웃 확정 후 상품별 빠른 적용
PHASE 5
검수 및 납품
Day 53–60
클라이언트 최종 검수, 피드백 반영, 디자인 시스템 완성, 퍼블리싱 가이드 작성, Figma 파일 정리 및 최종 납품
산출물: 최종 Figma 파일, 디자인 시스템, 퍼블리싱 가이드, 이미지 에셋
마일스톤 체크포인트
마일스톤
시점
검수 기준
M1: 디자인 방향성 컨펌
Day 10
무드보드 및 와이어프레임 승인
M2: 메인 시안 확정
Day 24
메인 페이지 PC/모바일 디자인 승인
M3: 서브 페이지 완료
Day 38
카테고리 마스터 템플릿 + 회원/주문 페이지 승인
M4: 상세페이지 완료
Day 52
~20종 상세페이지 + 다채널 에셋 승인
M5: 최종 납품
Day 60
전체 Figma 파일, 디자인 시스템, 퍼블리싱 가이드 납품
커뮤니케이션 계획
항목
방식
주기
일일 진행 공유
Slack / 카카오톡
매일
주간 미팅
Zoom / Google Meet
주 1회
마일스톤 리뷰
Figma 코멘트 + 화면 공유
단계 완료 시
디자인 피드백
Figma 코멘트
상시
유사 프로젝트 경험
본 프로젝트와 유사한 UI/UX 디자인 리뉴얼 및 대규모 디자인 수행 경험을 소개합니다.
10
유사 프로젝트
50+
디자인 페이지
60일
작업 기간
7년+
IT 프로젝트 경험
핀테크 / UI/UX 리뉴얼
P2P 크라우드 펀딩 플랫폼
핀테크 · 2019.12~2020.01 (2개월)
프로젝트 개요
투자자·차입자·운영자를 연결하는 한국형 P2P 대출 자동화 플랫폼의 UI/UX 전면 리뉴얼. 80+ 엔티티, 330+ API 패턴, 고객 포탈 + 관리자 패널.
핵심 기능
투자 상품 마켓플레이스 — 실시간 펀딩 현황 UI
4종 대출 멀티스텝 위저드 — 복잡한 신청 프로세스 UX 설계
종합 관리자 대시보드 — 200+ API 관리자 패널
본 프로젝트와의 유사점
운영 중인 서비스의 UI/UX 전면 리뉴얼 — 가천포크와 동일하게 기존 운영 중인 서비스의 디자인을 전면 개편한 프로젝트로, 기존 사용자 경험을 유지하면서 새로운 디자인 시스템을 적용하는 전략 수립 경험
기술 스택
PythonDjangoMySQLFigma
B2B SaaS / 50+ 페이지
EZ-Approve — 전자결재 · 업무 관리 올인원 플랫폼
B2B SaaS · 2026.01~2026.03 (9주)
프로젝트 개요
한국 기업의 결재·문서 프로세스를 디지털화하는 업무 자동화 SaaS 플랫폼. 50+ 페이지 규모의 대규모 UI 디자인과 MUI v5 디자인 시스템 구축.
핵심 기능
7종 사용자 역할별 대시보드 — 복잡한 권한 체계 반영 UI
Lexical 기반 문서 편집기 — 170파일 규모 커스텀 에디터
MUI v5 컴포넌트 시스템 — 체계적 디자인 시스템
본 프로젝트와의 유사점
대규모 페이지 디자인 시스템 구축 — 50+ 페이지를 일관된 디자인 시스템으로 관리한 경험으로, 28개 카테고리 페이지를 마스터 템플릿 기반으로 체계적으로 제작 가능
기술 스택
Next.jsMUI v5NestJSFigma
멀티플랫폼 / 6개 플랫폼
하모니 링크 — 노인 주간보호센터 통합 관리 플랫폼
헬스케어 B2B SaaS · ~6개월
프로젝트 개요
돌봄 기록, 투약 관리, 보호자 소통, AI 건강분석을 통합한 멀티플랫폼 관리 시스템. 6개 플랫폼 대응 반응형·적응형 디자인.
핵심 기능
6개 플랫폼 대응 — 모바일/웹/데스크탑 각각 최적화된 UI
2,532 다국어 키 — 체계적 디자인 토큰 시스템
퍼블리셔 협업 가이드 — 디자인-개발 핸드오프 프로세스
본 프로젝트와의 유사점
멀티플랫폼 대응 디자인 + 퍼블리싱 가이드 — 가천포크의 다채널(PC, 모바일, 쿠팡, 스마트스토어) 대응과 동일한 맥락으로, 각 플랫폼/채널 규격에 맞춘 에셋 생성과 퍼블리싱 가이드 작성 경험
기술 스택
FlutterNext.jsNestJSFigma
핀테크 / VC
Series B — 투자조합 관리 올인원 플랫폼
B2B SaaS / 핀테크 · 2023.11–2024.12 (14개월)
프로젝트 개요
한국 VC 업계를 위한 펀드 관리 + AI 보고서 생성 올인원 SaaS 플랫폼. 50+ 페이지, 80+ 엔티티, 1,652 PR.
핵심 기능
50+ 페이지 대규모 UI/UX 디자인
다중 사용자 역할별 대시보드
MUI v5 기반 체계적 디자인 시스템
본 프로젝트와의 유사점
대규모 페이지 디자인 — 50+ 페이지 + 다중 역할 대시보드 설계 경험으로 가천포크의 메인+카테고리+상세페이지 대규모 디자인에 체계적 접근 가능
기술 스택
Next.jsMUI v5NestJSLexicalAWS
B2C 앱 / 운세
Fortune App — 사주 기반 운세 앱
B2C 앱 · 2024.07–2024.09 (3개월)
프로젝트 개요
사주 기반 맞춤형 운세·궁합 추천 모바일 앱. 기획부터 Figma 디자인, Flutter 개발까지 3개월 내 풀패키지 딜리버리.
핵심 기능
기획~Figma UI/UX 디자인~개발 풀패키지
Clean Architecture, 12+ 화면 디자인
소셜 로그인, 포인트/리워드 시스템
본 프로젝트와의 유사점
기획~Figma 디자인 풀패키지 — 본 프로젝트와 동일한 기획+디자인 범위를 Figma로 수행한 경험, 디자인 시스템 구축 포함
기술 스택
FlutterFirebaseBLoCFigma
B2B 플랫폼 / 네트워킹
Connectin — 디지털 명함 & 네트워킹 플랫폼
B2B 네트워킹 · 2025.05–2025.08 (3개월)
프로젝트 개요
OCR 명함 스캐닝, E2E 암호화 메시징, BLE/GPS 근거리 탐색을 결합한 디지털 명함 & 네트워킹 플랫폼. 크로스플랫폼(iOS, Android, Web) 3개 플랫폼.
핵심 기능
크로스플랫폼 UI/UX 설계 (iOS, Android, Web)
41개 모바일 기능 모듈, 63개 API
소셜 피드 & 게시물/댓글/리액션
본 프로젝트와의 유사점
크로스플랫폼 UI 설계 — 3개 플랫폼 동시 대응 UI를 설계한 경험으로 가천포크의 PC/모바일 반응형 디자인에 활용 가능
기술 스택
FlutterNext.jsExpressFigma
B2C 앱 / 소셜
Calendar Share — 소셜 캘린더 공유 플랫폼
B2C 소셜 앱 · 2025.01 (MVP)
프로젝트 개요
소셜 피드와 캘린더 일정을 통합한 크로스플랫폼 모바일 앱. 45+개 화면, 7종 푸시 알림, Android + iOS 동시 지원.
핵심 기능
45+ 화면 대규모 모바일 앱 디자인
소셜 피드 + 실시간 채팅
Android + iOS 크로스플랫폼
본 프로젝트와의 유사점
대규모 화면 디자인 — 45+ 화면의 모바일 앱을 기획~디자인한 경험으로 가천포크의 메인+28개 카테고리+20종 상세페이지 규모 디자인에 대응 가능
기술 스택
FlutterFirebaseSupabaseFigma
B2C 앱 / 피트니스
Pilates App — 필라테스 프랜차이즈 관리 앱
B2B2C 앱 · 2019.09–2019.12 (4개월)
프로젝트 개요
필라테스 센터의 예약·결제·회원관리를 통합하는 올인원 관리 플랫폼. React Native로 Android/iOS/Web 3개 플랫폼 4개월 동시 출시.
핵심 기능
React Native 기반 3-플랫폼 동시 출시
8개 기능 모듈 (예약, 결제, CRM, 커뮤니티)
센터 관리자·강사·회원 3종 사용자 역할 UI
본 프로젝트와의 유사점
다중 사용자 역할 UI — 3종 사용자 역할별 화면 설계 경험으로 가천포크의 일반 고객/회원/관리자 역할별 UI 설계에 활용 가능
기술 스택
React NativeReactNode.jsWebSocket
Web3 / 마켓플레이스
Life3 — Web 3.0 dApp 마켓플레이스
Web3 · 2023.12–2024.07 (8개월)
프로젝트 개요
NFT 마켓플레이스, 포인트-토큰 스왑, 게이미피케이션 리워드를 통합한 Web 3.0 dApp. 3개 프론트엔드 앱 + 어드민 패널 25+ 페이지.
핵심 기능
NFT 마켓플레이스 — 상품 브라우징·상세·거래 UI
어드민 패널 25+ 페이지
PC + 모바일 반응형 웹
본 프로젝트와의 유사점
상품 마켓플레이스 UI — NFT 컬렉션 브라우징·상세 조회 UI가 가천포크의 상품 카테고리 탐색·상세페이지 구조와 유사한 커머스형 UX 패턴
기술 스택
ReactNext.jsExpressSolidity
B2C 앱 / 게이미피케이션
DayStarter — Sleep-to-Earn 게이미피케이션 앱
자체 프로덕트 · 2022.06~현재 (3년+ 운영)
프로젝트 개요
센서 기반 수면 인증 + 게이미피케이션 + 토큰 이코노미를 결합한 알람 앱. 48개 화면, Spine 2D 캐릭터, 37개 데이터 모델.
핵심 기능
48개 모바일 화면, 체계적 UI 구성
Spine 2D 스켈레톤 애니메이션 캐릭터
프로필/대시보드/설정 등 다양한 화면 유형
본 프로젝트와의 유사점
대규모 모바일 앱 디자인 — 48개 화면의 앱을 기획~디자인~개발한 경험으로 가천포크의 전체 페이지 규모(메인+28개 카테고리+20종 상세+공통 페이지) 디자인에 충분한 역량