University 메뉴 카테고리 세분화 — 오픈 스튜디오, 과제전, 졸업작품 등 작품 성격별 분류 체계 설계
소셜 인터랙션 — 좋아요 버튼 + 카운트, 댓글 작성·수정·삭제 기능의 UI/UX 설계
아티스트 페이지 (신규) — 아티스트 리스트 탐색 + 개별 포트폴리오 뷰어 상세 페이지
일반 메뉴 리뉴얼 — About UI/UX 변경, Contact 문의 양식 구조화
유저 참여형 전시 공간 — 스크랩 기반 가상 전시 페이지 컨셉 디자인
반응형 웹 — PC/MO 대응 전 화면 디자인
제안 포인트
unsignedseoul.com 사이트를 분석한 결과, 현재 카페24 AUBE 스킨 기반으로 약 6개 페이지 유형이 운영되고 있습니다. 초성 필터(ㄱ~ㅎ, A~Z) 기반 University 리스트, 브랜드 스토리 About 페이지, 카페24 기본 문의 양식(결제/배송 분류)을 사용하는 Contact 페이지 등을 확인했습니다.
기존 카페24 스킨의 한계를 넘어, 갤러리 플랫폼 특화 UI/UX로 전환하는 것이 핵심입니다. 유사 프로젝트(Life3 NFT 갤러리, Connectin 소셜 피드, Series B 대규모 디자인 시스템) 수행 경험을 바탕으로 효율적으로 진행하겠습니다.
사용 기술 및 툴
기획 & 디자인
FigmaFigJamPhotoshopIllustrator
협업 및 커뮤니케이션
SlackZoomNotion카카오톡
견적서
본 견적서는 프로젝트 요구사항 분석을 기반으로 산출되었습니다.
견적 요약
항목
내용
프로젝트명
갤러리 플랫폼 기획 및 UI/UX 디자인
제안 금액
720,000원 (VAT 별도)
제안 기간
10일
견적 유효기간
제안일로부터 30일
상세 견적 내역
구분
항목
수량
단가
금액
기획
상세 기획 (IA, 화면 설계, 사이트맵)
1식
-
150,000원
디자인
디자인 시스템 정의 (컬러, 타이포, 그리드)
1식
-
70,000원
디자인
와이어프레임 (전 화면 Lo-fi)
1식
-
80,000원
디자인
UI/UX 디자인 PC (10장)
10장
22,000원
220,000원
디자인
반응형 MO 디자인 (7장)
7장
17,000원
120,000원
산출물
디자인 가이드라인 & 에셋 정리
1식
-
50,000원
QA
검수 & 개발자 핸드오프
1식
-
30,000원
합계 (VAT 별도)
720,000원
산정 근거
유사 갤러리 플랫폼 기획·디자인 프로젝트 수행 경험을 기반으로 효율적인 공수를 산정하였습니다. 기획(IA, 화면 설계)과 디자인(디자인 시스템, Hi-fi 시안, 반응형)을 체계적으로 분리하여 10일 내 완성도 높은 산출물을 제공합니다.
포함 사항
Figma 디자인 원본 파일 전체 이관
화면 설계서 (Wireframe / Storyboard)
디자인 가이드라인 문서
개발용 에셋 (아이콘, 이미지 등)
Figma Inspect 설정 (개발자 핸드오프)
불포함 사항
프론트엔드/백엔드 개발 (내부 개발팀 담당)
실제 콘텐츠(작품 이미지, 텍스트) 수급
서버 호스팅 및 도메인 비용
추가 디자인 시안 (3회 이상 수정 시 별도 협의)
공수계산서
기능별 디자인 공수(Man-Day)를 산출하여 일정과 비용의 근거를 제시합니다.
공수 요약
구분
공수 (M/D)
비율
기획/설계
3.0 M/D
30%
디자인 시스템 + 와이어프레임
2.0 M/D
20%
UI/UX 디자인 (PC + MO)
3.5 M/D
35%
가이드라인/QA/핸드오프
1.5 M/D
15%
합계
10.0 M/D
100%
기능별 상세 공수
기능
세부 작업
담당
공수 (M/D)
기획/설계
기존 사이트 분석 & 1차 기획안 리뷰
기획
1.0
IA 재설계, 사이트맵, 화면 플로우
기획
1.0
유저 참여형 전시 공간 컨셉 기획
기획
1.0
디자인 시스템
컬러, 타이포, 그리드, 컴포넌트 정의
디자인
1.0
전 화면 Lo-fi 와이어프레임
디자인
1.0
UI/UX 디자인
홈, University 리스트, 대학 상세
디자인
1.0
작품 상세, 아티스트 리스트/상세
디자인
1.0
About, Contact, 유저 전시 컨셉
디자인
0.5
핵심 화면 7장 모바일 반응형
디자인
1.0
가이드/핸드오프
디자인 가이드라인 & 에셋 정리
디자인
1.0
최종 검수, Figma Inspect 설정
QA
0.5
산정 기준
1 M/D = 8시간 기준 (1인 1일 작업량)
주 5일 근무 기준
버퍼 10~15% 포함
유사 프로젝트 수행 경험 기반 효율적 개발
PRD (Product Requirements Document)
프로젝트 요구사항을 정의하고 기획·디자인 범위를 명확히 합니다.
1. 프로젝트 배경 및 목적
현재 카페24 기반으로 운영 중인 졸업작품 아카이빙 플랫폼(unsignedseoul.com)을 독립 웹사이트로 이전하며, 전문적인 UI/UX 리뉴얼을 통해 사용자 경험과 디자인 완성도를 높이는 것이 목표입니다.
단순 아카이빙을 넘어 카테고리 세분화, 소셜 인터랙션, 아티스트 페이지를 추가하고, 궁극적으로 유저 참여형 전시 공간까지 발전시키는 기반을 마련합니다.
2. 사용자 정의
사용자 유형
설명
주요 기능
일반 방문자
졸업작품 감상 및 탐색
작품 브라우징, 대학 검색, 좋아요
아티스트
작품 등록 및 포트폴리오 관리
아티스트 페이지, 작품 업로드, 프로필 관리
큐레이터 (일반 유저)
개인 전시 공간 구성
스크랩, 가상 전시 공간 만들기
관리자
플랫폼 운영 및 콘텐츠 관리
대학 등록, 전시 관리, 댓글 관리
3. 기능 요구사항
3.1 University 메뉴
[필수] 카테고리 세분화: 오픈 스튜디오, 과제전, 졸업작품 분류
[필수] 대학별 연도/전공 필터링 + 검색
[필수] 좋아요 버튼 + 카운트 표시
[필수] 댓글 작성, 수정, 삭제 UI
3.2 아티스트 페이지 (신규)
[필수] 아티스트 리스트 탐색 + 썸네일 노출
[필수] 아티스트별 포트폴리오 뷰어 (이미지 + 영상 미디어)
[선택] 아티스트 팔로우 기능
3.3 일반 메뉴 리뉴얼
[필수] About 페이지 UI/UX 변경
[필수] Contact 문의 양식 구조화 (갤러리 맞춤 분류)
[확정] Community 메뉴 제외
3.4 유저 참여형 전시 공간 (컨셉)
[컨셉] 스크랩한 작품으로 가상 전시 공간 구성
[컨셉] 전시 공간 레이아웃 템플릿 제공
[컨셉] 구상 단계 — 착수 후 세부 기획 협의
4. 비기능 요구사항
항목
요구사항
반응형
PC/MO 반응형 웹 디자인 (Breakpoint: 768px, 1024px)
접근성
WCAG 2.1 AA 기본 준수 (명도 대비, 폰트 크기)
성능
이미지 최적화 가이드라인 제공 (WebP, lazy loading 권장)
일관성
디자인 시스템 기반 컴포넌트 재사용률 80% 이상
5. 기술 제약사항
디자인 툴: Figma (클라이언트 지정)
개발팀(2인)이 구현 가능한 수준의 UI 복잡도 유지
카페24 → 독립 웹사이트 이전이므로 기존 스킨 제약 없음
이미지 중심 콘텐츠 — 고해상도 이미지 대응 레이아웃 필수
6. 범위 외 사항 (Out of Scope)
프론트엔드/백엔드 개발 (내부 개발팀 담당)
실제 콘텐츠(작품 이미지, 텍스트) 수급 및 입력
Community 메뉴 (제외 확정)
서버 인프라 구축 및 배포
SEO 최적화 (개발 단계에서 처리)
일정 제안
총 10일 기준 단계별 마일스톤 및 산출물을 제안합니다.
전체 일정 요약
단계
기간
주요 산출물
Phase 1: 기획 디벨롭
Day 1–2
IA 문서, 사이트맵, 화면 플로우
Phase 2: 디자인 시스템 + 와이어프레임
Day 3–4
디자인 시스템, Lo-fi 와이어프레임 전체
Phase 3: UI/UX 디자인 (PC)
Day 5–7
PC Hi-fi 시안 10장
Phase 4: 반응형 MO + 가이드라인
Day 8–9
MO 반응형 7장, 디자인 가이드라인
Phase 5: QA & 핸드오프
Day 10
최종 검수, Figma Inspect, 에셋 전달
상세 타임라인
PHASE 1
기획 디벨롭
Day 1–2
기존 사이트 상세 분석, 1차 기획안 리뷰, IA 재설계, 사이트맵·화면 플로우 작성
산출물: IA 문서, 사이트맵, 화면 플로우 다이어그램
검수: 클라이언트 승인 후 Phase 2 진행
PHASE 2
디자인 시스템 + 와이어프레임
Day 3–4
디자인 시스템 정의(컬러, 타이포, 그리드, 컴포넌트), 전 화면 Lo-fi 와이어프레임
산출물: 디자인 시스템 Figma 파일, 와이어프레임 전체
검수: 와이어프레임 검토 완료 후 Phase 3 진행
PHASE 3
UI/UX 디자인 (PC)
Day 5–7
홈, University 리스트, 대학 상세, 작품 상세, 아티스트 리스트/상세, About, Contact, 유저 전시 컨셉
산출물: PC Hi-fi 시안 10장
검수: 시안 검토 및 피드백 반영
PHASE 4
반응형 MO + 가이드라인
Day 8–9
핵심 화면 7장 모바일 반응형 디자인, 디자인 가이드라인 문서, 에셋 정리
산출물: MO 반응형 시안 7장, 디자인 가이드라인
PHASE 5
QA & 핸드오프
Day 10
전체 산출물 최종 검수, Figma Inspect 설정, 개발자 핸드오프
산출물: 최종 Figma 파일, 에셋 패키지, 가이드라인 문서
마일스톤 체크포인트
마일스톤
시점
검수 기준
M1: 기획 완료
Day 2
IA 문서, 사이트맵 승인
M2: 와이어프레임 완료
Day 4
와이어프레임 전 화면 검토 완료
M3: PC 시안 완료
Day 7
PC Hi-fi 시안 10장 검토 완료
M4: 전체 납품
Day 10
전체 산출물 전달 완료
커뮤니케이션 계획
항목
방식
주기
일일 진행 공유
Slack / 카카오톡
매일
주간 미팅
Zoom / Google Meet
주 1회
마일스톤 리뷰
화면 공유 + Figma 코멘트
단계 완료 시
피드백 관리
Figma 코멘트 / Notion
상시
유사 프로젝트 경험
본 프로젝트와 유사한 기능/기술 스택을 활용한 수행 경험을 소개합니다.
13+
완료 프로젝트
10개
유사 프로젝트
50+
디자인 페이지
5yr
UI/UX 경력
Web3 / 갤러리
Life3 — Web 3.0 dApp 마켓플레이스
NFT 마켓플레이스 · 2023.12 ~ 2024.07 (8개월)
프로젝트 개요
NFT 컬렉션 브라우징, 상세 조회, 온체인 소유권 검증을 지원하는 Ethereum 기반 NFT 마켓플레이스. 이미지 중심 갤러리 브라우징 UX를 구현했습니다.
핵심 기능
NFT 컬렉션 갤러리 브라우징 — 미디어 중심 카드 레이아웃
상세 조회 페이지 — 이미지 슬라이더 + 메타데이터
필터링 UI — 카테고리, 속성별 검색
본 프로젝트와의 유사점
이미지 중심 탐색 → 상세 조회 패턴 — NFT 컬렉션 카드가 졸업작품 카드에, 필터링 UI가 카테고리 세분화에 직접 활용
갤러리형 브라우징 UX — 상세 슬라이더가 작품 상세 페이지에 활용 가능
기술 스택
React 18Next.js 13MUI v5Figma
B2B / 네트워킹
Connectin — 디지털 명함 & 네트워킹 플랫폼
프로필/포트폴리오 뷰어 · 2025.05 ~ 2025.08 (3개월)
프로젝트 개요
디지털 명함 생성, 프로필 카드 리스트, 소셜 피드(게시물, 댓글, 리액션) 기능을 갖춘 네트워킹 플랫폼. 3개 플랫폼 반응형 설계.
핵심 기능
프로필 카드 리스트 — 사용자 탐색 + 썸네일 노출
소셜 피드 — 게시물, 댓글, 리액션 인터랙션
포트폴리오 뷰어 — 개별 사용자 상세 페이지
본 프로젝트와의 유사점
아티스트 리스트 + 포트폴리오 뷰어 — 본 프로젝트의 아티스트 페이지와 동일한 리스트→상세 패턴
좋아요/댓글 소셜 인터랙션 — 소셜 피드의 댓글·리액션 UI를 직접 활용
기술 스택
Flutter 3.22Next.js 15Tailwind CSSFigma
B2B SaaS / 핀테크
Series B — 투자조합 관리 올인원 플랫폼
대규모 웹 UI/UX · 2023.11 ~ 2024.12 (14개월)
프로젝트 개요
투자조합 관리, 전자결재, 규제 보고를 통합한 VC 특화 올인원 SaaS. 50+ 페이지 대규모 웹 UI/UX 기획·디자인·개발 전담.
핵심 기능
50+ 페이지 대규모 웹 UI/UX 기획 & 디자인
디자인 시스템 구축 (MUI v5 컴포넌트 라이브러리)
반응형 웹 대응 + 실시간 공동편집 에디터
본 프로젝트와의 유사점
디자인 시스템 구축 — 컬러, 타이포, 그리드, 컴포넌트 정의 경험을 본 프로젝트에 직접 활용
대규모 반응형 웹 설계 — 50+ 페이지 기획~디자인 워크플로우 경험
기술 스택
Next.js 13MUI v5React QueryFigma
B2B SaaS / 전자결재
EZ-Approve — 전자결재 SaaS 플랫폼
B2B SaaS · 2026.01 ~ 2026.03 (9주)
프로젝트 개요
기업용 전자결재 SaaS. 50+ 페이지 관리자 대시보드, 170파일 리치 에디터, 2,764 파일 규모의 대형 웹 애플리케이션.
핵심 기능
50+ 페이지 관리자 대시보드 UI/UX
170파일 리치 에디터 (26 커스텀 노드)
7종 역할별 UI 분기 설계 (RBAC)
본 프로젝트와의 유사점
대규모 웹 UI/UX 설계 — 50+ 페이지 규모의 복잡한 UI 설계 경험으로 효율적 컴포넌트 재활용
역할별 UI 분기 — 일반 방문자/아티스트/큐레이터/관리자 등 다양한 사용자 유형 대응 경험
기술 스택
Next.js 13MUI v5FigmaTypeScript
B2B SaaS / 헬스케어
Harmony Link — 시니어 주간보호 관리 플랫폼
헬스케어 / 시니어 케어 · 2025 (6개월)
프로젝트 개요
시니어 주간보호센터 통합 관리 플랫폼. 6개 플랫폼(Android, iOS, Web 등) 동시 지원, 관리자 웹 패널, 133K+ LOC.
핵심 기능
관리자 웹 패널 (MUI 기반 반응형)
사진 앨범 관리 (이미지 업로드/갤러리)
다국어 지원 (2,532 키)
본 프로젝트와의 유사점
사진 앨범/갤러리 UI — 이미지 업로드 및 갤러리 뷰 경험이 작품 갤러리 설계에 활용
반응형 웹 + 멀티플랫폼 UI — PC/MO 반응형 디자인 경험
기술 스택
Next.js 13MUIFlutterFigma
B2C 앱 / 소셜
Calendar Share — 소셜 캘린더 공유 플랫폼
소셜 네트워킹 · 2025.01 (MVP)
프로젝트 개요
캘린더와 소셜 미디어를 통합한 크로스플랫폼 앱. 45+ 화면, 소셜 피드(좋아요/리트윗/댓글), QR 기반 소셜 디스커버리.
핵심 기능
소셜 피드 (좋아요, 리트윗, 댓글)
QR 기반 소셜 디스커버리
7종 푸시 알림 시스템
본 프로젝트와의 유사점
소셜 인터랙션 UI (좋아요/댓글) — 본 프로젝트의 좋아요 버튼 + 댓글 기능 UI 설계에 직접 활용
소셜 피드 UX 패턴 — 게시물 기반 피드 레이아웃 설계 경험
기술 스택
Flutter 3.27FirebaseSupabaseFigma
Web3 / GameFi
NFT-DeFi — NFT 메타버스 DeFi 게임 플랫폼
블록체인 게임 · 2022.01 ~ 2022.03 (3개월)
프로젝트 개요
NFT 캐릭터 수집과 게임, DeFi 수익 창출을 통합한 Web3 GameFi 플랫폼. 기획부터 UI/UX 디자인, NFT 캐릭터 아트까지 풀스코프.
핵심 기능
NFT 컬렉션 갤러리 + 경매/마켓플레이스
UI/UX 디자인 + NFT 캐릭터 아트 디자인
반응형 웹 (PC + 모바일)
본 프로젝트와의 유사점
NFT 갤러리 = 작품 갤러리 — NFT 컬렉션 브라우징 UI가 졸업작품 갤러리 탐색과 동일 패턴
아트 디자인 경험 — NFT 캐릭터 아트 디자인 경험으로 시각적 감각 보유
기술 스택
ReactSolidityIllustratorFigma
B2C 앱 / 피트니스
Pilates App — 필라테스 프랜차이즈 관리 앱
CRM / O2O · 2019.09 ~ 2019.12 (4개월)
프로젝트 개요
필라테스 센터의 예약, 결제, 회원관리를 통합하는 올인원 플랫폼. 기획~디자인~개발 풀스코프, 3개 플랫폼 동시 출시.
핵심 기능
커뮤니티 & 채팅 (소셜 인터랙션)
프로필 카드 리스트 (강사/회원)
반응형 웹 + 모바일 앱 UI 설계
본 프로젝트와의 유사점
커뮤니티/소셜 기능 UX — 채팅, 프로필, 커뮤니티 기능이 소셜 인터랙션 설계에 활용
기획~디자인 풀스코프 — 기획부터 디자인까지 전 과정을 담당한 경험
기술 스택
React NativeReactFigma
게임 / 텔레그램
Casual Game — 텔레그램 미니앱 게임
게임 / 인터랙티브 · ~7개월
프로젝트 개요
텔레그램 기반 캐주얼 아케이드 게임 + 레퍼럴 시스템. Phaser.js 게임 엔진, 다중 캐릭터 스킨, 스프라이트 애니메이션.
핵심 기능
리더보드 & 순위 UI
아이템 스토어 & 캐릭터 스킨
인터랙티브 애니메이션 UX
본 프로젝트와의 유사점
인터랙티브 UX 설계 — 게임 인터랙션 경험이 유저 참여형 전시 공간 컨셉에 참고
카드형 아이템 UI — 아이템 스토어의 카드 레이아웃이 작품 카드 UI에 활용
기술 스택
Phaser.jsReact 18NestJSFigma
AI / 자동화
AI Agent — AI-Native 개발 프레임워크
AI / 자동화 · 2025~ (47일간 236 커밋)
프로젝트 개요
멀티 AI 에이전트 오케스트레이션 프레임워크. React 19 + shadcn/ui 기반 실시간 대시보드, Tailwind CSS 4 디자인 시스템.
핵심 기능
React 19 + shadcn/ui 대시보드
Tailwind CSS 4 디자인 시스템
Radix UI 컴포넌트 라이브러리
본 프로젝트와의 유사점
최신 디자인 시스템 경험 — Tailwind CSS + shadcn/ui + Radix UI 기반 모던 컴포넌트 설계 경험