테크니컬 라이팅 웹사이트 디자인

Quartz 테크니컬 라이팅 웹사이트 디자인

Quartz는 키보드에서 손을 떼지 않고 아웃라인에서 초안, 리뷰, 발행까지 이동하려는 테크니컬 라이터를 위한 워크스페이스로 소개됩니다. 이 페이지는 실제 운영 서비스가 연결된 증거가 아니라 콘셉트 웹사이트이므로, 가장 큰 기여는 에디토리얼 프레이밍입니다. 기능을 나열하기 전에 전문 도구에 하나의 관점을 부여합니다.

첫 문장은 크게 왼쪽 정렬된 Instrument Serif 제목으로 놓이고 “docs nobody read”에 이탤릭 강조가 들어갑니다. 최대 너비 16ch는 긴 주장을 좁은 단으로 만들고, 보조 문단은 더 넓은 52ch 줄 길이를 씁니다. 따뜻한 오프화이트 캔버스 위에서 어두운 Request access 버튼은 더 차분한 Read the manual 액션과 인쇄된 단축키 배지와 대비됩니다. 글쓰기라는 전제가 우선되지만, 이 컨트롤들이 광고된 워크스페이스 작업을 실제로 수행하지는 않습니다.

디자인이 지원하는 작업

이 페이지는 서로 관련된 여러 웹사이트 작업을 다루지만, 모두 Quartz의 전제에 묶어 둡니다. 방문자는 제품이 누구를 위한 것인지, 상상된 워크플로가 어떤 순서인지, 무엇이 되기를 거부하는지, 요금제가 대상에 따라 어떻게 다른지 이해할 수 있습니다. 이런 내용은 기능이 가득한 소개가 아니라 짧은 라벨과 반복되는 대비를 통해 전달됩니다.

페이지는 글쓰기에서 포지셔닝으로 이동한다

레이아웃은 제품 이야기와 같은 순서를 따릅니다. 큰 히어로가 목소리를 세우고, 에디터를 소개한 뒤 리뷰, 내보내기, 히스토리, 통합으로 이어집니다. 그다음 대비 섹션이 Quartz가 아닌 것을 밝히고, 요금제 섹션이 에디토리얼 입장을 세 가지 대상별 제안으로 옮깁니다. 이 순서 덕분에 페이지는 카탈로그가 아니라 하나의 논증처럼 읽힙니다.

1. 에디터에서 시작하기

   첫 번째 번호 섹션은 “01 / OUTLINE”이며 제목은 “An outline that doubles as a typewriter.”입니다. 카피에는 제목 끌어다 놓기, 포커스 모드, 페이지의 나머지 부분을 흐리게 처리하는 내용이 나옵니다. 이런 디테일은 구조와 집중을 연결하지만, 검증된 런타임 동작이 아니라 제안된 인터랙션 동작으로 남아 있습니다.

2. 팀 맥락으로 확장하기

   다음 섹션들은 인라인 리뷰, Markdown 내보내기, 수정 히스토리, 통합을 소개합니다. 라벨은 각 아이디어를 간결하게 유지하고, 설명은 구체적인 관계를 더합니다. 댓글은 한 줄에 고정되고, 문서는 같은 .md 구조를 읽고 쓰는 것으로 설명되며, 티켓 ID는 사이드 레일과 관련된 것으로 표시됩니다. 각 추가 요소는 상상된 워크스페이스를 넓히지만, 실제 구현이 입증해야 할 제품 주장의 수도 늘립니다.

3. 상업적 선택으로 마무리하기

   요금제 영역은 월 $9의 Solo, 좌석당 월 $22의 Studio, “Talk / to us”로 표시된 Press를 비교합니다. 서로 다른 청구 단위와 대상 라벨이 작성자 한 명, 문서 팀, 출판사를 구분합니다. Solo와 Press는 각각 기능 네 개를 나열하고, Studio는 다섯 개를 나열하며 추천 배지를 받습니다. Press는 단순히 더 긴 목록을 내세우는 대신 SSO, 셀프 호스팅, 내보내기 파이프라인, 지원으로 주제를 바꿉니다. 모든 가격과 기능은 샘플 포지셔닝입니다.

눈에 보이는 디자인과 기능의 경계

Quartz는 구현된 글쓰기 워크스페이스가 아니라 마케팅 콘셉트입니다. 유일한 스크립트는 IntersectionObserver로 섹션을 나타내며, 버튼, 표시된 단축키, 편집, 리뷰, 내보내기, 계정 생성은 처리하지 않습니다. 기본 링크는 Surfaces, What It Isn't, Plans로 이동하지만 Changelog에는 대응하는 섹션이 없고 푸터 링크는 플레이스홀더입니다. 따라서 이 페이지는 작동하는 통합, 암호화 동기화, 발행, 실제 가격 제안이 아니라 시각적 포지셔닝을 보여 줍니다. 이런 서비스는 별도의 구현과 테스트가 필요합니다.

출처 표기

OpenDesign은 이 예시를 Community 라이브러리에서 배포합니다. 소스 문서는 에디토리얼 미니멀리즘과 공간 리듬 가이드에 대해 Taste Skill by Leonxlnx를 명시합니다: https://github.com/Leonxlnx/taste-skill. 이는 배포 크레딧이며 OpenDesign이 독자적으로 원저작했다는 주장은 아닙니다. 번들된 매니페스트는 MIT를 명시하지만, 화면에 나온 모든 자산에 대한 별도 권리를 확립하지는 않습니다.