| 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 |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| tokens |
|
이 문서는 프로젝트 발표 자료를 탐색·검토하는 프로젝트 매니저와 문서를 작성·협업하는 마크다운 공간을 하나의 제품으로 구현하기 위한 디자인 기준이다.
기존 문서는 Imweb 마케팅 사이트의 시각 언어를 직접 재현하는 데 초점이 있었다. 현재 문서는 프로젝트 요구사항, 페이지 명세, WBS를 기준으로 다음 경험을 우선한다.
- 프로젝트를 빠르게 찾고 비교하고 공유한다.
- PDF 발표 자료와 Q&A의 맥락을 끊지 않는다.
- 블록 문서, 데이터베이스, 일정과 프로젝트 정보를 연결한다.
- 공동 편집, 권한, 변경 이력처럼 복잡한 상태를 명확하게 보여준다.
- 쇼케이스의 시각적 매력과 업무 도구의 정보 밀도를 한 제품 안에서 조절한다.
본 문서의 토큰은 초기 구현 기준이다. 브랜드 확정 전에도 일관된 UI를 만들 수 있어야 하며, 사용자 테스트 결과에 따라 값은 조정할 수 있다.
제품은 별도 서비스 두 개처럼 보이면 안 된다.
- 프로젝트 매니저: 발견, 비교, 발표 자료 열람, 피드백에 최적화된 쇼케이스 모드
- 마크다운 공간: 작성, 구조화, 공동 편집, 관리에 최적화된 워크스페이스 모드
글로벌 헤더, 검색, 사용자 메뉴, 알림, 기본 색상과 상태 표현은 공유한다. 콘텐츠 폭, 정보 밀도, 보조 탐색 방식은 작업 모드에 맞게 달라진다.
- 맥락을 보존한다. 목록의 필터, PDF의 현재 페이지, 댓글 스레드, 문서 위치가 화면 이동 후에도 유지되어야 한다.
- 근거를 가까이 둔다. 프로젝트 설명, 발표 슬라이드, Q&A, 관련 문서와 마일스톤을 가능한 한 같은 맥락에서 연결한다.
- 상태를 숨기지 않는다. 저장, 동기화, 업로드, 권한, 해결 여부, 버전 상태를 사용자가 추측하게 만들지 않는다.
- 표면에 따라 밀도를 조절한다. 쇼케이스는 이미지와 요약을 넉넉하게, 에디터와 데이터베이스는 조밀하지만 읽기 쉽게 구성한다.
- 키보드와 링크를 일급 기능으로 취급한다. 슬래시 명령, 단축키, 딥링크, URL 기반 필터 상태를 핵심 상호작용으로 설계한다.
| 사용자 | 주요 목표 | 디자인이 해결할 문제 |
|---|---|---|
| 탐색자·리뷰어 | 프로젝트를 찾고 발표 자료를 검토하고 질문한다 | 검색과 필터, 비교 가능한 목록, PDF와 댓글의 직접 연결 |
| 프로젝트 기여자 | 프로젝트 정보와 자료를 등록·갱신한다 | 명확한 메타데이터 폼, 대용량 업로드 상태, 버전 이력 |
| 문서 협업자 | 문서와 데이터베이스를 작성하고 함께 편집한다 | 블록 조작, 현재 위치, 동시 편집 상태, 충돌 없는 피드백 |
| 워크스페이스 관리자 | 권한, 공개 링크, 가져오기·내보내기, 웹훅을 관리한다 | 영향 범위와 위험도를 드러내는 관리 UI |
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
- 통합 검색 또는 프로젝트 목록에서 대상을 찾는다.
- 프로젝트 상세에서 PDF와 설명을 함께 검토한다.
- 댓글의
#p12태그로 특정 슬라이드에 질문을 연결한다. - 관련 회의록·요구사항·마일스톤을 마크다운 공간에서 연다.
- 필요한 경우 프로젝트 정보와 문서를 수정하고 변경 상태를 확인한다.
필터, 정렬, 뷰 모드, PDF 페이지, 활성 탭은 URL로 복원 가능해야 한다.
전체 인상은 차분한 업무 도구 위에 프로젝트 결과물이 돋보이는 구조다.
- 제품 크롬은 중립색과 얇은 경계선으로 조용하게 유지한다.
- 썸네일, PDF, 코드, 다이어그램 등 프로젝트 콘텐츠가 시각적 주인공이 된다.
- 브랜드 블루는 주요 행동, 현재 위치, 선택 상태에 사용한다.
- 시안 계열 액센트는 PDF 딥링크, 연결 문서, 동기화처럼 “맥락 연결”을 나타낼 때 제한적으로 사용한다.
- 장식용 그라데이션과 과도한 그림자는 사용하지 않는다.
| 역할 | 토큰 | 값 | 사용 |
|---|---|---|---|
| 주요 행동 | 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 |
입력, 표 행, 분할선 |
의미 색상은 텍스트·아이콘·라벨을 함께 사용한다. 색만으로 상태를 구분하지 않는다.
| 상태 | 색 | 예 |
|---|---|---|
| 성공 | #15803d |
저장 완료, 업로드 완료, 해결됨 |
| 경고 | #b45309 |
마감 임박, 동기화 지연, 공개 링크 만료 예정 |
| 위험 | #b91c1c |
삭제, 업로드 실패, 권한 제거 |
| 정보 | #0369a1 |
처리 중 안내, 새 버전, 시스템 정보 |
프로젝트 진행 상태는 다음처럼 고정한다.
기획 중: neutral + 문서 아이콘개발 중: primary + 진행 아이콘완료: success + 체크 아이콘발표 마감: warning 또는 danger + 시계 아이콘보관됨: muted + archive 아이콘
한국어 가독성과 제품 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, 8, 12, 16, 24, 32, 48px - 기본 컨트롤 높이:
40px - 주요 행동과 모바일 터치 영역: 최소
44px - 반경: 입력·버튼
8px, 패널12px, 미디어16px, 배지9999px - 기본 패널은 1px 경계선을 사용하고 그림자는 사용하지 않는다.
- 메뉴, 팝오버, 드래그 프리뷰에만 낮은 그림자를 허용한다.
- 카드 안에 카드를 반복해서 중첩하지 않는다.
- 데스크톱 높이
56px, 모바일 높이52px - 좌측: 로고와
프로젝트 매니저 ↔ 마크다운 공간전환 - 중앙: 통합 검색
- 우측: 새 항목 행동, 알림, 사용자 메뉴
- 현재 서비스는 텍스트, 색상, 하단 표시선 중 두 가지 이상으로 식별한다.
서비스 전환은 라우트가 바뀌어도 사용자의 검색어와 최근 맥락을 가능한 한 보존한다.
- 데스크톱 기본 폭
264px, 축소 폭64px - 컬렉션과 문서 계층은 들여쓰기, chevron, 선택 배경으로 표현한다.
- 드래그 대상과 놓을 위치를 분명하게 구분한다.
- 즐겨찾기, 최근 문서, 휴지통, 관리자 메뉴는 문서 트리와 시각적으로 분리한다.
- 모바일에서는 오버레이 drawer로 전환한다.
- 프로젝트와 문서를 결과 그룹으로 나눈다.
- 결과에는 유형, 제목, 일치 구문, 위치, 권한 상태를 표시한다.
- 키보드 방향키, Enter, Escape를 지원한다.
- 권한 없는 결과의 존재를 암시하지 않는다.
상단 컨트롤은 다음 순서로 배치한다.
- 페이지 제목과 새 프로젝트 버튼
- 검색
- 진행 상태·기술 스택·학기·작성자 필터
- 정렬과 카드·리스트·테이블 뷰 전환
필터가 적용되면 활성 조건 수와 해제 행동을 가까이 표시한다. 필터 패널을 닫아도 활성 조건은 칩으로 남긴다.
- 16:9 썸네일
- 제목은 최대 2줄
- 한 줄 요약은 최대 2줄
- 진행 상태, 핵심 기술 태그 2~3개, 작성자, 좋아요·댓글 수
- 카드 전체를 링크로 만들되 내부 버튼의 클릭 영역은 분리한다.
- 썸네일보다 제목, 요약, 작성자와 최근 활동을 우선한다.
- 빠른 스캔을 위해 행 높이와 메타데이터 위치를 고정한다.
- 비교 대상이 되는 상태, 기간, 작성자, 기술 스택, 최근 업데이트를 열로 제공한다.
- 열 숨김과 가로 스크롤을 허용하되 제목 열은 고정한다.
상단에서 제목, 요약, 상태, 기간, 팀원, 기술 스택과 주요 행동을 한 번에 파악할 수 있어야 한다.
데스크톱 기본 구조:
- 주 영역: PDF 뷰어 또는 프로젝트 보고서
- 보조 영역: 목차, 버전, Q&A, 관련 문서
- 탭:
발표 자료,상세 보고서,관련 문서,첨부 파일
PDF 뷰어는 콘텐츠 집중을 위해 짙은 중립 배경을 사용할 수 있는 유일한 주요 표면이다. 페이지 번호, 확대율, 전체 화면, 버전은 항상 현재 상태를 보여준다.
#page=12와 댓글의 #p12는 연결 액센트 색과 링크 아이콘을 사용한다. 클릭 시 페이지 이동 후 해당 슬라이드와 댓글 맥락을 동시에 강조한다.
- 질문, 일반 피드백, 해결됨 상태를 텍스트 라벨로 구분한다.
- 댓글은 작성자, 작성 시각, 편집 여부, 멘션, 슬라이드 태그를 표시한다.
- 답글은 과도하게 들여쓰지 않고 2단계부터 동일 스레드 선을 사용한다.
해결됨전환은 질문 작성자와 프로젝트 기여자에게만 노출한다.- 새 답글과 멘션은 댓글 전체를 재정렬하지 않고 해당 위치에 안정적으로 삽입한다.
폼은 기본 정보 → 참여자·기간 → 자료 업로드 → 상세 보고서 → 검토 순서로 구성한다.
- 필수·선택 항목을 명확히 표시한다.
- 대용량 파일은 파일별 진행률, 처리 상태, 실패 원인, 재시도를 제공한다.
- 기존 PDF를 교체할 때는 “덮어쓰기”가 아니라 “새 버전 추가”임을 명확히 알린다.
- 저장 전 이탈 시 변경 사항 경고를 제공한다.
- 본문 캔버스 최대 폭은 기본
760px - 블록 핸들은 hover와 키보드 focus에서 나타난다.
- 슬래시 메뉴는 검색 결과, 카테고리, 단축키를 함께 보여준다.
- 드래그 중 원본 위치, 놓을 위치, 다단 레이아웃 경계를 구분한다.
- 코드, 수식, 임베드, 데이터베이스 블록은 공통 블록 툴바를 사용한다.
- 하위 페이지는 일반 링크와 구분되는 페이지 아이콘과 이동 affordance를 갖는다.
- 참여자 아바타와 커서 색은 동일 사용자에게 세션 내에서 일관되게 배정한다.
- 저장 상태는
저장 중 → 저장됨, 네트워크 문제는오프라인 변경 사항 있음으로 표현한다. - 인라인 댓글이 있는 텍스트는 배경색만이 아니라 댓글 아이콘과 연결선으로 표시한다.
- 충돌과 권한 변경은 toast만으로 끝내지 않고 해당 블록 또는 페이지에 지속 상태를 남긴다.
데이터베이스는 가능한 폭을 모두 사용하는 유동형 캔버스다.
- Table, Board, Calendar, Gallery, List는 같은 데이터와 필터 상태를 공유한다.
- 뷰 전환은 콘텐츠를 다시 불러오는 느낌 없이 즉시 이루어져야 한다.
- 속성 타입은 아이콘과 이름으로 함께 식별한다.
- 필터와 정렬은 자연어에 가까운 문장형 빌더로 구성한다.
- Relation은 연결 대상, Rollup은 계산 기준과 집계 방식을 단계적으로 선택한다.
- 위험한 스키마 변경은 영향받는 뷰와 수식을 먼저 보여준다.
- Diff는 추가, 삭제, 변경되지 않은 맥락을 동시에 읽을 수 있어야 한다.
- 복원은 현재 버전을 지우지 않고 새 버전으로 생성한다.
- 권한은 상속 여부와 실제 적용 권한을 함께 표시한다.
- 외부 공개에는 비밀번호, 만료일, 검색 노출 여부를 한 화면에서 확인하게 한다.
- 삭제, 권한 축소, 공개 전환은 영향 범위를 명시한 확인 절차를 사용한다.
| 종류 | 사용 |
|---|---|
| Primary | 화면의 한 가지 핵심 행동 |
| Secondary | 저장 외 보조 행동, 취소가 아닌 대안 |
| Ghost | 툴바, 행 내부, 반복 행동 |
| Destructive | 삭제, 권한 제거, 공개 해제 |
한 컨트롤 그룹에서 Primary는 하나만 사용한다. 아이콘만 있는 버튼은 명확한 accessible name과 tooltip을 제공한다.
- 라벨을 placeholder로 대체하지 않는다.
- 오류는 입력 바로 아래에 원인과 해결 방법을 표시한다.
- 자동 저장과 수동 저장이 섞이는 화면에서는 저장 책임을 명시한다.
- 다중 선택은 선택 수, 전체 해제, overflow 상태를 제공한다.
- 탭은 같은 맥락의 화면 전환에만 사용한다.
- 필터 칩은 제거 가능한 조건, 배지는 읽기 전용 상태에 사용한다.
- 진행 상태, 권한, 질문 해결 여부를 같은 배지 스타일로 혼용하지 않는다.
- 카드: 프로젝트나 파일처럼 하나의 독립 객체
- 패널: 도구, 메타데이터, 보조 컨텍스트
- 표: 비교와 대량 편집
모든 정보를 카드로 감싸지 않는다. 계층은 간격, 제목, 분할선으로 먼저 표현한다.
- Toast: 완료처럼 짧게 사라져도 되는 피드백
- Inline message: 현재 입력이나 블록과 직접 관련된 문제
- Banner: 오프라인, 권한 변경, 시스템 장애처럼 화면 전체에 영향을 주는 상태
- Notification center: 멘션, 댓글, 프로젝트 업데이트처럼 다시 확인할 사건
모든 주요 화면은 다음 상태를 구현해야 한다.
| 상태 | 표현 |
|---|---|
| 초기 로딩 | 실제 레이아웃과 닮은 skeleton |
| 부분 로딩 | 해당 패널 또는 행만 진행 상태 표시 |
| 빈 상태 | 이유, 다음 행동, 권한 여부를 설명 |
| 검색 결과 없음 | 활성 필터와 검색어를 보여주고 수정 경로 제공 |
| 권한 없음 | 요청 가능한 권한과 담당자 안내 |
| 오프라인 | 읽기 가능 범위와 로컬 변경 저장 상태 표시 |
| 업로드 실패 | 파일별 원인, 재시도, 제거 행동 |
| 동기화 충돌 | 영향 범위, 보존된 버전, 해결 행동 |
로딩 중 기존 콘텐츠를 불필요하게 지우지 않는다. 낙관적 업데이트를 사용한 경우 실패 시 되돌림과 원인을 명확히 보여준다.
| 구간 | 너비 | 핵심 변화 |
|---|---|---|
| Mobile | <640px |
단일 열, 사이드바 drawer, 카드 중심 목록 |
| Tablet | 640–1023px |
2열 카드, 보조 패널을 탭·drawer로 전환 |
| Desktop | 1024–1439px |
고정 사이드바, 분할 상세 화면 |
| Wide | ≥1440px |
PDF·Q&A 또는 편집기·컨텍스트 동시 표시 |
모바일 규칙:
- PDF 컨트롤은 핵심 항목만 남기고 나머지는 overflow 메뉴로 이동한다.
- Q&A와 관련 문서는 PDF 아래로 배치한다.
- 테이블은 중요 열을 우선하고 필요할 때 가로 스크롤한다.
- 블록 드래그는 길게 누르기와 명시적 이동 메뉴를 함께 제공한다.
- hover에만 존재하는 기능을 만들지 않는다.
- WCAG 2.2 AA를 목표로 한다.
- 일반 텍스트 대비는 최소
4.5:1, 큰 텍스트와 비텍스트 UI는 최소3:1 - 모든 기능은 키보드로 접근·실행 가능해야 한다.
- focus ring은 배경과
3:1이상 대비되는 2px 외곽선으로 표시한다. - 모달과 팝오버는 focus를 올바르게 이동하고 닫은 뒤 원래 트리거로 복귀한다.
- 색상만으로 진행 상태, 사용자 커서, Diff, 오류를 구분하지 않는다.
- 애니메이션 감소 설정에서 이동·확대 애니메이션을 제거한다.
- PDF, 이미지, 썸네일에는 대체 텍스트 또는 설명 입력 경로를 제공한다.
- 빠른 상태 변화:
120ms - 메뉴·패널:
180ms - 레이아웃 전환: 최대
240ms - 기본 easing:
cubic-bezier(0.2, 0, 0, 1)
모션은 위치 관계와 상태 변화를 설명할 때만 사용한다. 무한 반복, 장식적 parallax, 콘텐츠를 늦게 보여주는 fade는 사용하지 않는다.
- 짧고 직접적인 한국어를 사용한다.
- 버튼은 결과가 예상되는 동사형으로 쓴다:
프로젝트 등록,새 버전 추가,해결됨으로 표시 - 모호한
확인,예,계속대신 행동을 명시한다. - 오류는 “무엇이 실패했는지 → 왜 실패했는지 → 무엇을 할 수 있는지” 순서로 쓴다.
- 삭제·권한·공개 관련 문구는 영향 대상과 복구 가능 여부를 포함한다.
- 내부 구현 용어(CRDT, AST 등)는 관리자나 개발자 대상 화면이 아니면 노출하지 않는다.
색상, 간격, 글꼴, 반경, 그림자를 컴포넌트에 직접 입력하지 않는다. 의미 기반 토큰을 사용한다.
: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;
}- 공통 입력, 메뉴, dialog, tooltip, tabs는 검증된 접근성 primitive를 감싼다.
- 프로젝트 카드, 속성 셀, 댓글, 업로드 행처럼 반복되는 패턴을 재사용 컴포넌트로 만든다.
- 뷰별로 필터·정렬 상태 모델을 새로 만들지 않는다.
- 에디터, PDF, 데이터베이스 엔진의 코어는 수정하지 않고 adapter와 plugin 계층에서 제품 규칙을 적용한다.
- 목록 뷰, 정렬, 필터, 활성 탭, PDF 페이지는 URL과 동기화한다.
- 자동 저장, 업로드, 동기화는 명시적 상태 머신을 사용한다.
- 서버 권한과 클라이언트 표시 권한을 별개로 두지 않는다.
디자인 구현은 다음을 모두 만족해야 완료다.
- Desktop, Tablet, Mobile에서 정보 손실 없이 동작한다.
- 키보드만으로 주요 사용자 흐름을 완료할 수 있다.
- loading, empty, error, permission, offline 상태가 존재한다.
- 화면의 주요 상태가 새로고침 후 복원된다.
- 주요 색상 대비와 focus 흐름이 자동·수동 검증을 통과한다.
- PDF 딥링크, 댓글 태그, 관련 문서 이동이 실제 맥락을 유지한다.
| 디자인 영역 | 관련 요구사항 |
|---|---|
| 글로벌 헤더, 로그인, 검색, 알림 | 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은 요구사항 문서에서 보완해야 한다. 디자인은 해당 기능을 가정하되 구현 승인 전 추적 상태를 미정으로 표시한다.
- 프로젝트 결과물과 업무 UI의 시각적 우선순위를 분리한다.
- 현재 위치, 선택, 저장, 동기화, 권한 상태를 지속적으로 보여준다.
- PDF 페이지와 댓글, 프로젝트와 문서, 데이터베이스와 마일스톤을 직접 연결한다.
- 같은 데이터는 어떤 뷰에서도 동일한 필터와 상태 의미를 유지한다.
- 위험한 행동 전에 영향 범위와 복구 가능성을 설명한다.
- 마케팅 페이지의 대형 hero와 과도한 여백을 업무 화면에 그대로 적용하지 않는다.
- 브랜드 색을 모든 버튼, 링크, 배지에 반복하지 않는다.
- hover에만 핵심 행동을 숨기지 않는다.
- toast만으로 실패, 권한, 오프라인 상태를 처리하지 않는다.
- 모든 콘텐츠를 카드 안에 중첩하지 않는다.
- PDF, 에디터, 데이터베이스를 서로 다른 제품처럼 스타일링하지 않는다.
| 결정 | 이유 |
|---|---|
| Imweb 복제에서 프로젝트 전용 시스템으로 전환 | 현재 제품은 마케팅 사이트가 아니라 장시간 사용하는 생산성 도구이기 때문 |
| Primary를 ink가 아닌 blue로 정의 | 탐색·편집 화면에서 행동과 선택 상태를 일관되게 식별하기 위해 |
| Pretendard 중심 단일 UI 폰트 | 한국어 가독성, 배포 가능성, 복잡한 데이터 화면의 일관성을 위해 |
| 쇼케이스와 워크스페이스의 밀도 분리 | 결과물 감상과 대량 정보 편집이 서로 다른 공간 요구를 가지기 때문 |
| URL·상태 보존을 디자인 원칙으로 포함 | 필터, 딥링크, PDF 페이지, 문서 위치가 핵심 사용자 맥락이기 때문 |
| 상태·권한·오프라인 규칙 강화 | 실시간 협업과 대용량 업로드의 신뢰성을 UI가 설명해야 하기 때문 |