Skip to content

Latest commit

 

History

History
511 lines (383 loc) · 24.1 KB

File metadata and controls

511 lines (383 loc) · 24.1 KB
id new-project-manager
name New Project Manager
display_name_kr 프로젝트 허브
country KR
category productivity
status project-specific
primary_color #2563eb
updated 2026-07-28
omd 0.2
sources
docs/requirements.md
docs/page_description.md
docs/wbs.md
tokens
source note colors typography spacing rounded
project-goal-synthesis
프로젝트 쇼케이스와 협업형 지식 워크스페이스를 하나의 제품 경험으로 연결한다.
primary primary-hover primary-soft accent accent-soft ink body muted faint border surface surface-subtle canvas success warning danger
#2563eb
#1d4ed8
#dbeafe
#0891b2
#cffafe
#111827
#374151
#6b7280
#9ca3af
#d7dee8
#ffffff
#f1f5f9
#f7f8fa
#15803d
#b45309
#b91c1c
family
ui mono
Pretendard Variable, Pretendard, Noto Sans KR, system-ui, sans-serif
JetBrains Mono, SFMono-Regular, Consolas, monospace
xs sm md base lg xl section
4
8
12
16
24
32
48
sm md lg xl full
6
8
12
16
9999

프로젝트 허브 디자인 시스템

0. 문서 목적

이 문서는 프로젝트 발표 자료를 탐색·검토하는 프로젝트 매니저와 문서를 작성·협업하는 마크다운 공간을 하나의 제품으로 구현하기 위한 디자인 기준이다.

기존 문서는 Imweb 마케팅 사이트의 시각 언어를 직접 재현하는 데 초점이 있었다. 현재 문서는 프로젝트 요구사항, 페이지 명세, WBS를 기준으로 다음 경험을 우선한다.

  • 프로젝트를 빠르게 찾고 비교하고 공유한다.
  • PDF 발표 자료와 Q&A의 맥락을 끊지 않는다.
  • 블록 문서, 데이터베이스, 일정과 프로젝트 정보를 연결한다.
  • 공동 편집, 권한, 변경 이력처럼 복잡한 상태를 명확하게 보여준다.
  • 쇼케이스의 시각적 매력과 업무 도구의 정보 밀도를 한 제품 안에서 조절한다.

본 문서의 토큰은 초기 구현 기준이다. 브랜드 확정 전에도 일관된 UI를 만들 수 있어야 하며, 사용자 테스트 결과에 따라 값은 조정할 수 있다.

1. 제품 디자인 명제

1.1 하나의 제품, 두 가지 작업 모드

제품은 별도 서비스 두 개처럼 보이면 안 된다.

  • 프로젝트 매니저: 발견, 비교, 발표 자료 열람, 피드백에 최적화된 쇼케이스 모드
  • 마크다운 공간: 작성, 구조화, 공동 편집, 관리에 최적화된 워크스페이스 모드

글로벌 헤더, 검색, 사용자 메뉴, 알림, 기본 색상과 상태 표현은 공유한다. 콘텐츠 폭, 정보 밀도, 보조 탐색 방식은 작업 모드에 맞게 달라진다.

1.2 핵심 원칙

  1. 맥락을 보존한다. 목록의 필터, PDF의 현재 페이지, 댓글 스레드, 문서 위치가 화면 이동 후에도 유지되어야 한다.
  2. 근거를 가까이 둔다. 프로젝트 설명, 발표 슬라이드, Q&A, 관련 문서와 마일스톤을 가능한 한 같은 맥락에서 연결한다.
  3. 상태를 숨기지 않는다. 저장, 동기화, 업로드, 권한, 해결 여부, 버전 상태를 사용자가 추측하게 만들지 않는다.
  4. 표면에 따라 밀도를 조절한다. 쇼케이스는 이미지와 요약을 넉넉하게, 에디터와 데이터베이스는 조밀하지만 읽기 쉽게 구성한다.
  5. 키보드와 링크를 일급 기능으로 취급한다. 슬래시 명령, 단축키, 딥링크, URL 기반 필터 상태를 핵심 상호작용으로 설계한다.

2. 주요 사용자와 작업

사용자 주요 목표 디자인이 해결할 문제
탐색자·리뷰어 프로젝트를 찾고 발표 자료를 검토하고 질문한다 검색과 필터, 비교 가능한 목록, PDF와 댓글의 직접 연결
프로젝트 기여자 프로젝트 정보와 자료를 등록·갱신한다 명확한 메타데이터 폼, 대용량 업로드 상태, 버전 이력
문서 협업자 문서와 데이터베이스를 작성하고 함께 편집한다 블록 조작, 현재 위치, 동시 편집 상태, 충돌 없는 피드백
워크스페이스 관리자 권한, 공개 링크, 가져오기·내보내기, 웹훅을 관리한다 영향 범위와 위험도를 드러내는 관리 UI

3. 정보 구조와 핵심 흐름

3.1 글로벌 구조

Global Header
├─ Project Manager
│  ├─ Project List
│  ├─ Project Detail + PDF + Q&A
│  ├─ Project Create/Edit
│  └─ Author Projects
└─ Markdown Space
   ├─ Sidebar Tree
   ├─ Markdown Editor
   ├─ Database Views
   └─ History / Permissions / Integrations / Import-Export

3.2 대표 사용자 흐름

  1. 통합 검색 또는 프로젝트 목록에서 대상을 찾는다.
  2. 프로젝트 상세에서 PDF와 설명을 함께 검토한다.
  3. 댓글의 #p12 태그로 특정 슬라이드에 질문을 연결한다.
  4. 관련 회의록·요구사항·마일스톤을 마크다운 공간에서 연다.
  5. 필요한 경우 프로젝트 정보와 문서를 수정하고 변경 상태를 확인한다.

필터, 정렬, 뷰 모드, PDF 페이지, 활성 탭은 URL로 복원 가능해야 한다.

4. 시각 언어

4.1 분위기

전체 인상은 차분한 업무 도구 위에 프로젝트 결과물이 돋보이는 구조다.

  • 제품 크롬은 중립색과 얇은 경계선으로 조용하게 유지한다.
  • 썸네일, PDF, 코드, 다이어그램 등 프로젝트 콘텐츠가 시각적 주인공이 된다.
  • 브랜드 블루는 주요 행동, 현재 위치, 선택 상태에 사용한다.
  • 시안 계열 액센트는 PDF 딥링크, 연결 문서, 동기화처럼 “맥락 연결”을 나타낼 때 제한적으로 사용한다.
  • 장식용 그라데이션과 과도한 그림자는 사용하지 않는다.

4.2 색상 토큰

역할 토큰 사용
주요 행동 primary #2563eb 기본 버튼, 활성 탭, 선택 상태
주요 행동 Hover primary-hover #1d4ed8 hover·pressed
선택 배경 primary-soft #dbeafe 선택 행, 활성 필터, 현재 문서
연결 액센트 accent #0891b2 딥링크, 연결 문서, 동기화
기본 텍스트 ink #111827 제목, 핵심 정보
본문 body #374151 본문과 일반 라벨
보조 텍스트 muted #6b7280 메타데이터, 보조 설명
비활성 텍스트 faint #9ca3af placeholder, 비활성 상태
캔버스 canvas #f7f8fa 앱 배경
표면 surface #ffffff 패널, 카드, 메뉴
보조 표면 surface-subtle #f1f5f9 툴바, 빈 상태, 코드 외곽
경계 border #d7dee8 입력, 표 행, 분할선

4.3 의미 색상

의미 색상은 텍스트·아이콘·라벨을 함께 사용한다. 색만으로 상태를 구분하지 않는다.

상태
성공 #15803d 저장 완료, 업로드 완료, 해결됨
경고 #b45309 마감 임박, 동기화 지연, 공개 링크 만료 예정
위험 #b91c1c 삭제, 업로드 실패, 권한 제거
정보 #0369a1 처리 중 안내, 새 버전, 시스템 정보

프로젝트 진행 상태는 다음처럼 고정한다.

  • 기획 중: neutral + 문서 아이콘
  • 개발 중: primary + 진행 아이콘
  • 완료: success + 체크 아이콘
  • 발표 마감: warning 또는 danger + 시계 아이콘
  • 보관됨: muted + archive 아이콘

4.4 타이포그래피

한국어 가독성과 제품 UI의 일관성을 위해 별도 브랜드 폰트에 의존하지 않는다.

  • UI·본문: Pretendard Variable, Pretendard, Noto Sans KR, system-ui
  • 코드·수식 보조: JetBrains Mono, SFMono-Regular, Consolas
역할 크기 / 행간 굵기 사용
Page title 32 / 40 700 프로젝트·문서 제목
Section title 24 / 32 700 주요 영역 제목
Subsection 20 / 28 600 패널·카드 제목
Body 16 / 24 400 문서, 설명
UI label 14 / 20 500 버튼, 탭, 표 헤더
Metadata 12 / 18 400 작성자, 날짜, 버전
Code 14 / 22 400 코드 블록, 인라인 코드

긴 문서 본문은 65~78자 폭을 목표로 한다. 데이터베이스와 표는 가독성을 해치지 않는 범위에서 더 조밀하게 표시한다.

4.5 간격·형태·깊이

  • 간격: 4, 8, 12, 16, 24, 32, 48px
  • 기본 컨트롤 높이: 40px
  • 주요 행동과 모바일 터치 영역: 최소 44px
  • 반경: 입력·버튼 8px, 패널 12px, 미디어 16px, 배지 9999px
  • 기본 패널은 1px 경계선을 사용하고 그림자는 사용하지 않는다.
  • 메뉴, 팝오버, 드래그 프리뷰에만 낮은 그림자를 허용한다.
  • 카드 안에 카드를 반복해서 중첩하지 않는다.

5. 글로벌 셸

5.1 글로벌 헤더

  • 데스크톱 높이 56px, 모바일 높이 52px
  • 좌측: 로고와 프로젝트 매니저 ↔ 마크다운 공간 전환
  • 중앙: 통합 검색
  • 우측: 새 항목 행동, 알림, 사용자 메뉴
  • 현재 서비스는 텍스트, 색상, 하단 표시선 중 두 가지 이상으로 식별한다.

서비스 전환은 라우트가 바뀌어도 사용자의 검색어와 최근 맥락을 가능한 한 보존한다.

5.2 사이드바

  • 데스크톱 기본 폭 264px, 축소 폭 64px
  • 컬렉션과 문서 계층은 들여쓰기, chevron, 선택 배경으로 표현한다.
  • 드래그 대상과 놓을 위치를 분명하게 구분한다.
  • 즐겨찾기, 최근 문서, 휴지통, 관리자 메뉴는 문서 트리와 시각적으로 분리한다.
  • 모바일에서는 오버레이 drawer로 전환한다.

5.3 검색

  • 프로젝트와 문서를 결과 그룹으로 나눈다.
  • 결과에는 유형, 제목, 일치 구문, 위치, 권한 상태를 표시한다.
  • 키보드 방향키, Enter, Escape를 지원한다.
  • 권한 없는 결과의 존재를 암시하지 않는다.

6. 프로젝트 매니저

6.1 프로젝트 목록

상단 컨트롤은 다음 순서로 배치한다.

  1. 페이지 제목과 새 프로젝트 버튼
  2. 검색
  3. 진행 상태·기술 스택·학기·작성자 필터
  4. 정렬과 카드·리스트·테이블 뷰 전환

필터가 적용되면 활성 조건 수와 해제 행동을 가까이 표시한다. 필터 패널을 닫아도 활성 조건은 칩으로 남긴다.

카드 뷰

  • 16:9 썸네일
  • 제목은 최대 2줄
  • 한 줄 요약은 최대 2줄
  • 진행 상태, 핵심 기술 태그 2~3개, 작성자, 좋아요·댓글 수
  • 카드 전체를 링크로 만들되 내부 버튼의 클릭 영역은 분리한다.

리스트 뷰

  • 썸네일보다 제목, 요약, 작성자와 최근 활동을 우선한다.
  • 빠른 스캔을 위해 행 높이와 메타데이터 위치를 고정한다.

테이블 뷰

  • 비교 대상이 되는 상태, 기간, 작성자, 기술 스택, 최근 업데이트를 열로 제공한다.
  • 열 숨김과 가로 스크롤을 허용하되 제목 열은 고정한다.

6.2 프로젝트 상세

상단에서 제목, 요약, 상태, 기간, 팀원, 기술 스택과 주요 행동을 한 번에 파악할 수 있어야 한다.

데스크톱 기본 구조:

  • 주 영역: PDF 뷰어 또는 프로젝트 보고서
  • 보조 영역: 목차, 버전, Q&A, 관련 문서
  • 탭: 발표 자료, 상세 보고서, 관련 문서, 첨부 파일

PDF 뷰어는 콘텐츠 집중을 위해 짙은 중립 배경을 사용할 수 있는 유일한 주요 표면이다. 페이지 번호, 확대율, 전체 화면, 버전은 항상 현재 상태를 보여준다.

#page=12와 댓글의 #p12는 연결 액센트 색과 링크 아이콘을 사용한다. 클릭 시 페이지 이동 후 해당 슬라이드와 댓글 맥락을 동시에 강조한다.

6.3 Q&A와 댓글

  • 질문, 일반 피드백, 해결됨 상태를 텍스트 라벨로 구분한다.
  • 댓글은 작성자, 작성 시각, 편집 여부, 멘션, 슬라이드 태그를 표시한다.
  • 답글은 과도하게 들여쓰지 않고 2단계부터 동일 스레드 선을 사용한다.
  • 해결됨 전환은 질문 작성자와 프로젝트 기여자에게만 노출한다.
  • 새 답글과 멘션은 댓글 전체를 재정렬하지 않고 해당 위치에 안정적으로 삽입한다.

6.4 프로젝트 등록·수정

폼은 기본 정보 → 참여자·기간 → 자료 업로드 → 상세 보고서 → 검토 순서로 구성한다.

  • 필수·선택 항목을 명확히 표시한다.
  • 대용량 파일은 파일별 진행률, 처리 상태, 실패 원인, 재시도를 제공한다.
  • 기존 PDF를 교체할 때는 “덮어쓰기”가 아니라 “새 버전 추가”임을 명확히 알린다.
  • 저장 전 이탈 시 변경 사항 경고를 제공한다.

7. 마크다운 공간

7.1 블록 에디터

  • 본문 캔버스 최대 폭은 기본 760px
  • 블록 핸들은 hover와 키보드 focus에서 나타난다.
  • 슬래시 메뉴는 검색 결과, 카테고리, 단축키를 함께 보여준다.
  • 드래그 중 원본 위치, 놓을 위치, 다단 레이아웃 경계를 구분한다.
  • 코드, 수식, 임베드, 데이터베이스 블록은 공통 블록 툴바를 사용한다.
  • 하위 페이지는 일반 링크와 구분되는 페이지 아이콘과 이동 affordance를 갖는다.

7.2 협업 상태

  • 참여자 아바타와 커서 색은 동일 사용자에게 세션 내에서 일관되게 배정한다.
  • 저장 상태는 저장 중 → 저장됨, 네트워크 문제는 오프라인 변경 사항 있음으로 표현한다.
  • 인라인 댓글이 있는 텍스트는 배경색만이 아니라 댓글 아이콘과 연결선으로 표시한다.
  • 충돌과 권한 변경은 toast만으로 끝내지 않고 해당 블록 또는 페이지에 지속 상태를 남긴다.

7.3 데이터베이스

데이터베이스는 가능한 폭을 모두 사용하는 유동형 캔버스다.

  • Table, Board, Calendar, Gallery, List는 같은 데이터와 필터 상태를 공유한다.
  • 뷰 전환은 콘텐츠를 다시 불러오는 느낌 없이 즉시 이루어져야 한다.
  • 속성 타입은 아이콘과 이름으로 함께 식별한다.
  • 필터와 정렬은 자연어에 가까운 문장형 빌더로 구성한다.
  • Relation은 연결 대상, Rollup은 계산 기준과 집계 방식을 단계적으로 선택한다.
  • 위험한 스키마 변경은 영향받는 뷰와 수식을 먼저 보여준다.

7.4 이력·권한·공개

  • Diff는 추가, 삭제, 변경되지 않은 맥락을 동시에 읽을 수 있어야 한다.
  • 복원은 현재 버전을 지우지 않고 새 버전으로 생성한다.
  • 권한은 상속 여부와 실제 적용 권한을 함께 표시한다.
  • 외부 공개에는 비밀번호, 만료일, 검색 노출 여부를 한 화면에서 확인하게 한다.
  • 삭제, 권한 축소, 공개 전환은 영향 범위를 명시한 확인 절차를 사용한다.

8. 공통 컴포넌트

8.1 버튼

종류 사용
Primary 화면의 한 가지 핵심 행동
Secondary 저장 외 보조 행동, 취소가 아닌 대안
Ghost 툴바, 행 내부, 반복 행동
Destructive 삭제, 권한 제거, 공개 해제

한 컨트롤 그룹에서 Primary는 하나만 사용한다. 아이콘만 있는 버튼은 명확한 accessible name과 tooltip을 제공한다.

8.2 입력과 선택

  • 라벨을 placeholder로 대체하지 않는다.
  • 오류는 입력 바로 아래에 원인과 해결 방법을 표시한다.
  • 자동 저장과 수동 저장이 섞이는 화면에서는 저장 책임을 명시한다.
  • 다중 선택은 선택 수, 전체 해제, overflow 상태를 제공한다.

8.3 탭·필터·배지

  • 탭은 같은 맥락의 화면 전환에만 사용한다.
  • 필터 칩은 제거 가능한 조건, 배지는 읽기 전용 상태에 사용한다.
  • 진행 상태, 권한, 질문 해결 여부를 같은 배지 스타일로 혼용하지 않는다.

8.4 패널·카드·표

  • 카드: 프로젝트나 파일처럼 하나의 독립 객체
  • 패널: 도구, 메타데이터, 보조 컨텍스트
  • 표: 비교와 대량 편집

모든 정보를 카드로 감싸지 않는다. 계층은 간격, 제목, 분할선으로 먼저 표현한다.

8.5 알림

  • Toast: 완료처럼 짧게 사라져도 되는 피드백
  • Inline message: 현재 입력이나 블록과 직접 관련된 문제
  • Banner: 오프라인, 권한 변경, 시스템 장애처럼 화면 전체에 영향을 주는 상태
  • Notification center: 멘션, 댓글, 프로젝트 업데이트처럼 다시 확인할 사건

9. 상태 설계

모든 주요 화면은 다음 상태를 구현해야 한다.

상태 표현
초기 로딩 실제 레이아웃과 닮은 skeleton
부분 로딩 해당 패널 또는 행만 진행 상태 표시
빈 상태 이유, 다음 행동, 권한 여부를 설명
검색 결과 없음 활성 필터와 검색어를 보여주고 수정 경로 제공
권한 없음 요청 가능한 권한과 담당자 안내
오프라인 읽기 가능 범위와 로컬 변경 저장 상태 표시
업로드 실패 파일별 원인, 재시도, 제거 행동
동기화 충돌 영향 범위, 보존된 버전, 해결 행동

로딩 중 기존 콘텐츠를 불필요하게 지우지 않는다. 낙관적 업데이트를 사용한 경우 실패 시 되돌림과 원인을 명확히 보여준다.

10. 반응형 규칙

구간 너비 핵심 변화
Mobile <640px 단일 열, 사이드바 drawer, 카드 중심 목록
Tablet 640–1023px 2열 카드, 보조 패널을 탭·drawer로 전환
Desktop 1024–1439px 고정 사이드바, 분할 상세 화면
Wide ≥1440px PDF·Q&A 또는 편집기·컨텍스트 동시 표시

모바일 규칙:

  • PDF 컨트롤은 핵심 항목만 남기고 나머지는 overflow 메뉴로 이동한다.
  • Q&A와 관련 문서는 PDF 아래로 배치한다.
  • 테이블은 중요 열을 우선하고 필요할 때 가로 스크롤한다.
  • 블록 드래그는 길게 누르기와 명시적 이동 메뉴를 함께 제공한다.
  • hover에만 존재하는 기능을 만들지 않는다.

11. 접근성

  • WCAG 2.2 AA를 목표로 한다.
  • 일반 텍스트 대비는 최소 4.5:1, 큰 텍스트와 비텍스트 UI는 최소 3:1
  • 모든 기능은 키보드로 접근·실행 가능해야 한다.
  • focus ring은 배경과 3:1 이상 대비되는 2px 외곽선으로 표시한다.
  • 모달과 팝오버는 focus를 올바르게 이동하고 닫은 뒤 원래 트리거로 복귀한다.
  • 색상만으로 진행 상태, 사용자 커서, Diff, 오류를 구분하지 않는다.
  • 애니메이션 감소 설정에서 이동·확대 애니메이션을 제거한다.
  • PDF, 이미지, 썸네일에는 대체 텍스트 또는 설명 입력 경로를 제공한다.

12. 모션

  • 빠른 상태 변화: 120ms
  • 메뉴·패널: 180ms
  • 레이아웃 전환: 최대 240ms
  • 기본 easing: cubic-bezier(0.2, 0, 0, 1)

모션은 위치 관계와 상태 변화를 설명할 때만 사용한다. 무한 반복, 장식적 parallax, 콘텐츠를 늦게 보여주는 fade는 사용하지 않는다.

13. 콘텐츠와 문체

  • 짧고 직접적인 한국어를 사용한다.
  • 버튼은 결과가 예상되는 동사형으로 쓴다: 프로젝트 등록, 새 버전 추가, 해결됨으로 표시
  • 모호한 확인, , 계속 대신 행동을 명시한다.
  • 오류는 “무엇이 실패했는지 → 왜 실패했는지 → 무엇을 할 수 있는지” 순서로 쓴다.
  • 삭제·권한·공개 관련 문구는 영향 대상과 복구 가능 여부를 포함한다.
  • 내부 구현 용어(CRDT, AST 등)는 관리자나 개발자 대상 화면이 아니면 노출하지 않는다.

14. 구현 계약

14.1 토큰 우선

색상, 간격, 글꼴, 반경, 그림자를 컴포넌트에 직접 입력하지 않는다. 의미 기반 토큰을 사용한다.

:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: #dbeafe;
  --color-accent: #0891b2;
  --color-ink: #111827;
  --color-body: #374151;
  --color-muted: #6b7280;
  --color-border: #d7dee8;
  --color-surface: #ffffff;
  --color-canvas: #f7f8fa;
}

14.2 컴포넌트 우선

  • 공통 입력, 메뉴, dialog, tooltip, tabs는 검증된 접근성 primitive를 감싼다.
  • 프로젝트 카드, 속성 셀, 댓글, 업로드 행처럼 반복되는 패턴을 재사용 컴포넌트로 만든다.
  • 뷰별로 필터·정렬 상태 모델을 새로 만들지 않는다.
  • 에디터, PDF, 데이터베이스 엔진의 코어는 수정하지 않고 adapter와 plugin 계층에서 제품 규칙을 적용한다.

14.3 상태와 URL

  • 목록 뷰, 정렬, 필터, 활성 탭, PDF 페이지는 URL과 동기화한다.
  • 자동 저장, 업로드, 동기화는 명시적 상태 머신을 사용한다.
  • 서버 권한과 클라이언트 표시 권한을 별개로 두지 않는다.

14.4 완료 기준

디자인 구현은 다음을 모두 만족해야 완료다.

  • Desktop, Tablet, Mobile에서 정보 손실 없이 동작한다.
  • 키보드만으로 주요 사용자 흐름을 완료할 수 있다.
  • loading, empty, error, permission, offline 상태가 존재한다.
  • 화면의 주요 상태가 새로고침 후 복원된다.
  • 주요 색상 대비와 focus 흐름이 자동·수동 검증을 통과한다.
  • PDF 딥링크, 댓글 태그, 관련 문서 이동이 실제 맥락을 유지한다.

15. 요구사항 추적

디자인 영역 관련 요구사항
글로벌 헤더, 로그인, 검색, 알림 FR-1, FR-3.3, FR-5.5, FR-19
프로젝트 등록과 목록 FR-2, FR-3
프로젝트 상세, PDF, Q&A FR-4, FR-5
작성자·마크다운 공간 연동 FR-6
블록 에디터와 중첩 페이지 FR-7 ~ FR-12
데이터베이스와 5대 뷰 FR-13 ~ FR-17
컬렉션, 검색, 백링크, 이력 FR-18 ~ FR-21
실시간 협업과 권한 FR-22 ~ FR-25
Import/Export, API, 웹훅 FR-26 ~ FR-29

docs/page_description.md가 참조하지만 docs/requirements.md에 명시적으로 정의되지 않은 FR-3.5, FR-10, FR-27, FR-28은 요구사항 문서에서 보완해야 한다. 디자인은 해당 기능을 가정하되 구현 승인 전 추적 상태를 미정으로 표시한다.

16. Do / Don't

Do

  • 프로젝트 결과물과 업무 UI의 시각적 우선순위를 분리한다.
  • 현재 위치, 선택, 저장, 동기화, 권한 상태를 지속적으로 보여준다.
  • PDF 페이지와 댓글, 프로젝트와 문서, 데이터베이스와 마일스톤을 직접 연결한다.
  • 같은 데이터는 어떤 뷰에서도 동일한 필터와 상태 의미를 유지한다.
  • 위험한 행동 전에 영향 범위와 복구 가능성을 설명한다.

Don't

  • 마케팅 페이지의 대형 hero와 과도한 여백을 업무 화면에 그대로 적용하지 않는다.
  • 브랜드 색을 모든 버튼, 링크, 배지에 반복하지 않는다.
  • hover에만 핵심 행동을 숨기지 않는다.
  • toast만으로 실패, 권한, 오프라인 상태를 처리하지 않는다.
  • 모든 콘텐츠를 카드 안에 중첩하지 않는다.
  • PDF, 에디터, 데이터베이스를 서로 다른 제품처럼 스타일링하지 않는다.

17. 설계 결정 요약

결정 이유
Imweb 복제에서 프로젝트 전용 시스템으로 전환 현재 제품은 마케팅 사이트가 아니라 장시간 사용하는 생산성 도구이기 때문
Primary를 ink가 아닌 blue로 정의 탐색·편집 화면에서 행동과 선택 상태를 일관되게 식별하기 위해
Pretendard 중심 단일 UI 폰트 한국어 가독성, 배포 가능성, 복잡한 데이터 화면의 일관성을 위해
쇼케이스와 워크스페이스의 밀도 분리 결과물 감상과 대량 정보 편집이 서로 다른 공간 요구를 가지기 때문
URL·상태 보존을 디자인 원칙으로 포함 필터, 딥링크, PDF 페이지, 문서 위치가 핵심 사용자 맥락이기 때문
상태·권한·오프라인 규칙 강화 실시간 협업과 대용량 업로드의 신뢰성을 UI가 설명해야 하기 때문