IVE로 DIVE · 문서 · 디자인 시스템 · 화면 시안 ← 문서 목록

Design System & Screens

디자인 시스템 · 화면 시안

2026 리뉴얼 UI의 단일 기준 — 토큰 · 컴포넌트 · 전 화면 시안

아이브(IVE) 팬 커뮤니티 · 굿즈 커머스 서비스 “IVE로 DIVE”의 디자인 문서. 시안은 Pencil(.pen)로 직접 작성했고, 브랜드 Purple(#DB97E9) 램프와 Pretendard, 1440px 데스크톱을 기준선으로 삼는다. 라이트 · 다크 두 모드를 하나의 시맨틱 토큰 세트로 운용한다.

화면 시안 72종을 서비스 흐름 순으로, 이어서 디자인 시스템 6개 문서를 정리했다. 이미지를 누르면 원본 크기로 열린다.

디자인 파일 design/ive-design-system.pen · 토큰 문서 public/docs/design-system.md · 기능 명세 기능명세서 v2 — 12. 디자인 시스템 (DS-01~06) · 컴포넌트 카탈로그 스토리북 ↗ · 2026-08-31 기준

v1 → v2 변화 11

2025년 운영하던 v1 화면(직접 캡처한 GIF 기록)과 2026 리뉴얼 시안을 나란히 둔 비교. v1 전체 기록은 기능명세서 v1의 각 장에서, 변경점 요약은 기능명세서 v2 — 1장에서 볼 수 있다.

메인

영상 히어로 · 앨범 쇼케이스 · Hot Board로 재구성

소식

수동 기사·갤러리 → 자동 수집 피드 + 캘린더 일정

게시판 목록

표 목록 → 사진 히어로 · HOT 3 · 카드형 로우

게시판 글쓰기

react-quill → Tiptap 에디터 카드

게시판 상세

800px 리딩 칼럼 · 추천 버튼 · 작성자 카드

굿즈샵 목록

페이지 헤드 + 공통 정렬 셀렉트

굿즈샵 상세

갤러리 + 플로팅 구매 카드 + 세그먼트 탭

장바구니

진행 단계 · 상품별 카드 · 요약 3분할

마이페이지

프로필 밴드 + 사이드 내비 셸

결제 완료

단계 인디케이터 · 주문번호 복사 칩

메인 · 음악 4

서비스 첫 화면과 음악(디스코그래피). 전역 플로팅 플레이어는 두 화면이 공유한다. 동작 명세는 기능명세서 v2 — 3. 메인 · 음악 (MAIN · DISC) 참고.

S1 메인 · 라이트영상 히어로 · 트랙 마퀴 · 앨범 쇼케이스 · News · Hot Board · Shop

S3 음악(디스코그래피)최신 발매 히어로 · 필터 카운트 · 연도 그룹 그리드

S4 플레이어 · 미니 디스크플로팅 플레이어와 우하단 미니 디스크 동작 스펙

소식 2

일정 · 영상 · 기사 자동 수집 허브. 동작 명세는 기능명세서 v2 — 4. 소식 (NEWS) 참고.

S5 소식 · 라이트블러 포토 히어로 · 캘린더 통합 일정 · 4열 영상 · 가로형 기사

인증 3

디자인 시스템을 처음 적용한 화면. 동작 명세는 기능명세서 v2 — 5. 인증 (AUTH) 참고.

자유게시판 7

무대 사진 히어로 · HOT 3 · 필터 툴바 · 800px 리딩 칼럼 상세로 재구성한 라운지형 커뮤니티. 동작 명세는 기능명세서 v2 — 6. 자유게시판 (BRD) 참고.

**S10** 목록 · 라이트히어로 · 커뮤니티 스탯 · HOT 3 · 툴바 · 카드형 로우

**S12** 목록 빈 상태글 없음 · 검색 결과 없음 · 비로그인 · 공지 탭 4종

**S13** 글쓰기Tiptap 에디터 카드 · 가이드 카드 · 액션 로우

**S14** 상세 · 라이트이전/다음 · 추천 · 작성자 카드 · 댓글

**S16** 게시글 메뉴 · 삭제 모달⋯ 드롭다운과 destructive 확인 모달

굿즈샵 8

목록과 상세 V2 — 갤러리 · 플로팅 구매 카드 · 세그먼트 탭 · 추천 · FAQ. 동작 명세는 기능명세서 v2 — 7. 굿즈샵 (SHOP) 참고.

**S19** 상세 V2 · 라이트보라 히어로 · 갤러리 · 플로팅 구매 카드

**S21** 장바구니 담기 드로어체크 서클 · 담긴 상품 요약 · 2단 CTA

장바구니 · 결제 8

장바구니가 곧 주문서. 3단계 진행 인디케이터로 결제까지 이어진다. 동작 명세는 기능명세서 v2 — 8·9. 장바구니 · 결제 (CART · PAY) 참고.

**S25** 장바구니 · 라이트진행 단계 · 상품 카드 · 요약 3분할

**S32** 주문완료그라데이션 체크 · 주문번호 복사 칩 · 정보 카드

마이페이지 12

프로필 밴드 + 240px 사이드 내비 셸 위에 5개 콘텐츠와 모달 5종. 동작 명세는 기능명세서 v2 — 10. 마이페이지 (MY) 참고.

**S35** 주문 상세아이템 박스 · 배송/결제 수단 · 결제 정보 합계

S40 프로필 수정 모달아바타 크롭 · 닉네임 카운터 · 이메일 읽기전용

**S41** 프로필 이미지 크롭 모달원형 마스크 · 드래그 이동 · 휠/핀치/슬라이더 줌

DIVE 멤버십 13

무료 · DIVE+ · VIP 3단 플랜과 토스 빌링 정기결제 흐름. 동작 명세는 기능명세서 v2 — 10-6. DIVE 멤버십 (MY-19~25) 참고.

**S45** 멤버십 플랜베이직 · DIVE+ 1,900 · VIP 5,900(BEST)

**S46** 구독 중상태 카드 · 플랜 변경/결제 수단 변경 · 결제 정보 · 혜택 현황

**S47** 플랜 변경 · 업그레이드현재 플랜/업그레이드 라디오 · 남은 기간 차액 즉시 결제 안내

**S48** 플랜 변경 · 다운그레이드변경 예정 표시 · 다음 결제일부터 적용 안내

**S49** 변경 예약 상태예약 배너 + [변경 취소] · 그때까지 현재 혜택 유지

**S50** 해지 예정오렌지 상태 카드 · 해지 예정 칩 · 남은 일수 · 되돌리기 안내

**S51** 혜택 종료 후 재구독재구독 배너 · 이전 플랜 칩 · 다시 시작하기 CTA

**S56** 해지 취소 모달닫기 · 해지 취소하기 · 다음 결제 금액 안내

**S57** 커뮤니티 표시 스펙티어 뱃지 3사이즈 · 컬러 · 적용 예시

공통 · 시스템 8

여러 화면이 공유하는 요소와 시스템 화면. 동작 명세는 기능명세서 v2 — 2. 공통 (COM) 참고.

**S58** 헤더 · 로그인 상태GNB · 카트 뱃지 · 테마 토글 · 유저 드롭다운

**S62** 404 · 라이트그라데이션 넘버럴 · 끊긴 경로 칩 · 퀵링크

**S64** 앱 오프라인 · 라이트그라데이션 아이콘 원 · 상태 칩 · 다시 시도/홈으로 · 점검 칩

**S65** 앱 오프라인 · 다크다크 오프라인 — 하이브리드 앱 전용 화면

모바일 · 하단 네비 7

lg(1024px) 미만에서 데스크톱 GNB · 드로어 GNB를 대신하는 iOS 글라스 스타일의 플로팅 탭바(홈 · 소식 · 음악 · 굿즈샵 · 자유게시판). 화면 시안은 390px 실화면 캡처(pnpm capture:mobile) 위에 BottomNav 컴포넌트를 얹은 것. 동작 명세는 기능명세서 v2 — 2-2 (COM-22) · 14장 (MOB-09) 참고.