Editorial Docs Studio — 스킬 프로젝트 소개

문서 데모에서 반복해서 쓸 부분을 꺼내기

Editorial Docs Studio의 출발점은 Warm Noir 스타일의 문서 데모였습니다. 어두운 첫 화면에서 문서의 목적을 보여 주고, 종이 같은 본문 영역에서 자세한 내용을 읽는 구성입니다. 2026년 8월 1일에는 그 레이아웃 원칙을 독립 프로젝트로 분리했습니다. 한 문서를 복제하는 대신 다른 문서에서도 선택해서 쓸 수 있는 스타터를 만들었습니다.

제가 정한 범위는 스킬 패키지, 네 가지 프리셋, 정적 HTML과 CSS 스타터였습니다. 자료를 자동으로 가져와 요약하는 서비스나 관리 화면까지 한 번에 붙이지 않았습니다. 문서의 입력 구조와 읽기 화면을 먼저 안정적으로 연결하는 쪽을 택했습니다.

이 선택은 작업의 결과를 설명할 때도 중요합니다. 스타터가 만들어졌다는 것은 문서 골격과 스타일 파일을 얻었다는 뜻입니다. URL의 모든 내용을 자동으로 이해했거나 완성된 가이드가 생겼다는 뜻은 아닙니다. 그 사이에 내용을 정리하고 샘플 문장을 바꾸는 작업이 남도록 구조를 만들었습니다.

색을 고르기 전에 내용의 역할을 정하기

저는 원문을 바로 카드에 넣기보다 제목, 스타일, 읽기 밀도, 섹션 목록을 먼저 정하도록 했습니다. 섹션에는 이동할 수 있는 안정적인 앵커를 두고, 요약은 제목을 되풀이하지 않게 했습니다. 출처에는 링크뿐 아니라 어떤 맥락에서 사용했는지도 남길 수 있게 구성했습니다.

문서 모듈은 내용의 역할로 고릅니다. 순서대로 실행해야 하는 절차에는 단계 목록을 쓰고, 순서가 없는 확인 항목을 억지로 단계로 바꾸지는 않습니다. 같은 속성을 비교할 때는 표가 맞지만 긴 설명 문장을 작은 화면의 여러 열에 넣는 것은 피하도록 했습니다.

목차 역시 모든 문서에 붙이지 않습니다. 실질적인 섹션이 세 개 이상일 때 데스크톱 옆 목차를 쓰도록 했고, 짧은 공지나 한 화면 소개에서는 생략할 수 있게 했습니다. 모듈이 있다는 이유로 채워 넣으면 내용보다 구조가 더 크게 보일 수 있기 때문입니다.

프리셋과 밀도를 서로 다른 선택으로 두기

네 가지 프리셋에는 서로 다른 용도를 줬습니다. Warm Noir는 가이드와 제품 설명, Ivory Ledger는 정책과 긴 운영 문서, Slate Manual은 코드와 표가 많은 기술 문서, Signal Brief는 짧은 제안과 의사결정 자료를 위한 선택입니다. 이름만 다른 색상 묶음으로 두지 않고 어떤 문서에 적합한지 기준을 함께 적었습니다.

읽기 밀도는 프리셋과 분리했습니다. 여유 있는 구성, 표준 구성, 압축된 구성을 같은 스타일 안에서도 고를 수 있어야 합니다. 기술 문서라는 이유만으로 모든 문장을 빽빽하게 배치하거나, 소개 문서라는 이유만으로 설명을 지나치게 줄이지 않도록 한 것입니다.

공통 레이아웃과 테마 토큰도 나눴습니다. 프리셋을 바꿀 때 먼저 토큰을 수정하고, 구성 요소의 규칙은 필요할 때만 바꾸도록 했습니다. 이렇게 경계를 두면 색 선택 때문에 목차, 표 스크롤, 문서 영역의 동작까지 다시 만드는 일을 줄일 수 있습니다.

이미지도 가져오기·재구성·생략으로 나누기

문서에 들어갈 이미지에서는 원본 화면 자체가 필요한지, 화면이 설명하는 원리만 필요한지 먼저 구분했습니다. 실제 UI가 정보라면 원본을 참조하고 캡션과 출처를 붙입니다. 구조나 흐름이 핵심이면 새 도식으로 재구성합니다. 장식이나 중복 이미지는 문서에서 생략할 수 있도록 했습니다.

후보 이미지에는 직접 주소, 원문 페이지, 대체 텍스트, 주변 섹션, 역할을 남기는 목록을 만들었습니다. 브라우저에서 추출한 후보를 받아 이 목록으로 변환하는 도구도 넣었습니다. 이 도구는 후보를 정리하는 역할이며, 이미지마다 의미와 이용 조건을 대신 판단하는 장치로 만들지는 않았습니다.

새 도식으로 재구성할 때도 원본의 장식을 그대로 따라 그리기보다 관계와 순서를 옮기도록 했습니다. 문서에서 중요한 것은 어떤 시스템이 어디에 연결되고 무엇이 먼저 일어나는지입니다. 그림을 불러오지 못하더라도 캡션과 본문만으로 핵심을 이해할 수 있도록 두었습니다.

스타터는 편집 가능한 시작점으로 만들었습니다

생성기는 선택한 테마와 공통 스타일, 문서 템플릿을 출력 폴더로 복사합니다. 함께 만든 콘텐츠 설정에는 제목과 섹션의 샘플이 들어 있고, 이미지 목록은 빈 상태로 시작합니다. 저는 이 결과를 곧바로 완성 원고라고 부르지 않고 내용을 바꾸며 작업할 수 있는 시작점으로 두었습니다.

선택할 수 없는 스타일 이름이 들어오면 조용히 다른 프리셋으로 넘어가지 않고 오류를 알립니다. 선택을 명시했는데 결과는 기본 스타일이 되는 상황을 막기 위한 조건입니다. 템플릿에 본문과 글의 의미를 나타내는 기본 영역이 남아 있는지도 확인하도록 했습니다.

목차와 본문에는 실제 제목과 링크를 사용하고, 표와 코드는 그 의미에 맞는 요소로 둡니다. 좁은 화면의 표는 자기 영역 안에서 가로로 읽을 수 있게 하고, 목차는 접어 둘 수 있게 했습니다. 중요한 정보를 마우스 hover나 색만으로 전달하지 않고 키보드 초점도 보이도록 구성했습니다. 독자가 문서를 읽는 경로가 시각 장식에 의존하지 않게 하려는 선택입니다.

독립 스타터 뒤에 남은 개발 경계

처음 정한 구현에는 URL이나 PDF를 자동 추출하는 파이프라인을 포함하지 않았습니다. 여러 프레임워크용 렌더러와 스크린샷 QA 자동화도 후속 작업으로 남겼습니다. 문서 스타터를 만드는 것과 다양한 자료를 완성 문서로 변환하는 전체 서비스는 필요한 확인 범위가 다르기 때문입니다.

그래서 이 프로젝트를 적용할 때는 원문을 콘텐츠 구조로 정리한 뒤 프리셋과 밀도를 선택하고, 샘플 내용을 바꾼 후 화면을 확인합니다. 표, 코드, 이미지가 들어가면 그 모듈의 읽기 조건을 추가로 봅니다. 원본 이미지가 필요한 문서는 출처와 역할을 먼저 확정합니다.

제가 데모에서 독립 스타터로 옮기며 남긴 것은 특정 색 조합보다 선택의 순서입니다. 내용의 역할을 정하고, 문서에 필요한 모듈을 고른 뒤, 그 위에 프리셋을 적용합니다. 이 순서가 남아 있어야 다른 주제의 문서도 같은 화면을 복제하는 데서 끝나지 않고 읽는 목적에 맞게 구성할 수 있습니다.