문서를 모달 밖으로 꺼냈습니다
당신은 결제 서비스의 온보딩 페이지를 쓰고 있습니다. 제목 여섯 개, 코드 블록 두 개, 이 서비스가 소비하는 큐를 정리한 표 하나, 그리고 몇 번이고 다시 쓰게 되는 문단 하나. 다음 엔지니어가 실제로 읽을 문단이 바로 그것이기 때문입니다.
Archyl에서는 이번 주까지, 그 모든 걸 대화 상자 안에서 썼습니다. 뒤에 있는 페이지는 어두워졌습니다. 형제 페이지들이 놓여 있고, 지난번 페이지에 무슨 이름을 붙였는지 확인하러 갔을 문서 트리도 함께 어두워졌습니다. 에디터는 대화 상자를 채웠지만 대화 상자는 화면이 아니었고, 페이지를 읽는 일과 페이지를 쓰는 일은 서로 다른 두 곳에서 일어났습니다.
동작은 했습니다. 그런데 그다지 전문적으로 느껴지지도 않았습니다. 자리를 잡고 앉아 다시 만들 때까지 제가 계속 되돌아오던 문장이 바로 그것이었습니다.
문서 워크스페이스에는 이제 모달이 없습니다. 그 자리를 대신한 것들을 소개합니다.
에디터는 문서가 있는 자리에서 열립니다
페이지에서 편집을 누르거나, 읽는 중에 E를 누르면 에디터가 그 자리에서 콘텐츠 열을 넘겨받습니다. 트리는 있던 자리에, 밝기도 그대로, 여전히 클릭할 수 있는 상태로 남습니다. 무엇도 다른 무엇 위에 덮이지 않습니다.
쓰는 동안에도 문서는 문서처럼 보입니다. 제목은 제목 크기의 평범한 입력란이고, 라벨도 테두리 상자도 없습니다. 태그는 그 아래에 있습니다. 입력한 뒤 Enter나 쉼표를 누르면 하나가 추가되고, 빈 칸에서 Backspace를 누르면 마지막 것을 다시 가져옵니다. 폴더 경로는 액션 바 위쪽을 따라 이어지므로, 지금 쓰고 있는 페이지가 어디에 놓일지 늘 알 수 있습니다.
바는 상태도 함께 담고 있습니다. 초안이 저장된 내용과 다른 동안에는 호박색 점과 저장되지 않은 변경 사항이, 그다음에는 ⌘↵ 힌트를 단 저장이 나옵니다. 이 단축키는 에디터 어디에서나, Markdown 본문 안에서도 동작하므로 버튼까지 되돌아갈 일이 없습니다. 문단만 남기고 싶을 때를 위해 모드 전환 옆에 전체 화면 토글이 있고, Escape를 누르면 돌아옵니다. 아래쪽 가장자리에는 단어 수와 읽는 시간이 놓입니다.
작성, 분할, 미리보기
에디터에는 세 가지 모드가 있고, 툴바에서 내려야 할 결정은 그것뿐입니다.
- 작성은 Markdown만, 열 전체 너비로 보여 줍니다.
- 분할은 원본과 렌더링된 페이지를 나란히 놓습니다.
- 미리보기는 렌더링된 페이지만 보여 줍니다.
기본값은 분할입니다. 어느 것을 고르든 Archyl이 브라우저에 저장해 두고 모든 문서를 그 모드로 다시 엽니다. 그래서 날것의 Markdown으로 쓰는 사람과 제목이 렌더링되는 걸 보고 싶은 사람이 그 문제로 다투거나 페이지마다 다시 맞출 일이 없습니다.
폴더는 트리 안의 한 줄입니다
폴더를 만드는 일은 예전엔 그 자체로 대화 상자였습니다. 상자 하나, 텍스트 입력란 하나, 만들기 버튼 하나, 그리고 그 폴더가 어디에 생길지에 대한 단서는 없음.
이제 트리 헤더의 폴더 아이콘을 클릭하면, 그 폴더가 살게 될 바로 그 자리에, 알맞은 들여쓰기로, 폴더 아이콘까지 이미 그려진 편집 가능한 줄이 열립니다. 이름을 입력하고 Enter를 누르면 존재하게 됩니다. Escape는 취소입니다. 폴더 자체 메뉴에서 하위 폴더를 요청하면 상위 폴더가 펼쳐지고 그 안에 줄이 나타납니다.
이름 바꾸기도 같은 방식으로, 그 줄 안에서 합니다. 페이지와 폴더 옮기기는 여전히 끌어다 놓기입니다.
저장하지 않은 작업에서 그냥 클릭해 나갈 수는 없습니다
문서 워크스페이스 안의 모든 이동은 하나의 가드를 지납니다. 트리에서 다른 페이지를 고르는 것, 새 페이지를 시작하는 것, 다른 페이지를 편집으로 여는 것, 에디터에서 취소하고 나가는 것. 초안에 저장되지 않은 변경 사항이 있으면 그 동작은 붙잡히고, 먼저 확인이 뜹니다. 빠져나가는 쪽이 계속 편집, 일부러 버리는 쪽이 변경 사항 버리기입니다. 확인하고 나면 원래 요청했던 동작이 실행됩니다.
브라우저도 함께 막았습니다. 저장하지 않은 초안을 둔 채 탭을 닫으면 브라우저 자체의 경고가 뜹니다.
이번 릴리스에서 가장 눈에 띄지 않는 변경이지만, 제가 가장 강하게 옹호할 변경이기도 합니다. 클릭할 수 있는 페이지 트리를 에디터 옆에 두는 레이아웃은, 클릭이 문단 하나를 앗아갈 수 없을 때만 좋은 레이아웃입니다.
목차는 창이 아니라 패널을 따릅니다
열이 충분히 넓으면 페이지의 제목들이 본문 오른쪽 고정 레일에 자리 잡고, 스크롤에 따라 현재 섹션이 표시됩니다. 레일을 두기엔 너무 좁으면, 대신 툴바의 목차 팝오버로 접힙니다.
둘 사이의 전환을 결정하는 것은 브라우저 창의 너비가 아니라 패널의 너비입니다. 그 구분이 핵심 전부입니다. 문서 열은 트리와 공간을 나눠 쓰므로, 트리를 펼쳐 둔 27인치 모니터는 좁은 읽기 열을 둘러싼 넓은 창인 셈입니다. 창을 기준으로 한 브레이크포인트라면 거기에 레일을 세우고 글을 짓눌렀을 겁니다. Tailwind 4의 컨테이너 쿼리가 패널이 스스로를 재도록 해 줍니다.
제목을 클릭하면 글이 스크롤됩니다. 스크롤되는 건 글뿐입니다. 레일은 자기 목록을 스크롤해 활성 항목을 시야에 두되, 당신 아래에서 문서를 움직이지는 않습니다.
더미에서 덜어낸 것
이번 릴리스에서 네 개의 컴포넌트를 통째로 지웠습니다. 문서 모달, 폴더 생성 모달, 예전 목차 사이드바, 그리고 이제는 어디에서도 렌더링되지 않던 카드 목록형 문서 페이지입니다.
Markdown 에디터는 여전히 @uiw/react-md-editor이지만, 그 스타일은 이제 Archyl의 나머지 부분과 같은 디자인 토큰에서 옵니다. 라이트와 다크가 하나의 규칙 세트이고, 라이브러리 자체 스타일 위에 테마별 오버라이드 블록을 얹지 않습니다.
첨부 파일은 그대로이고 이전과 똑같이 동작합니다. 에디터에 파일을 끌어다 놓거나, 스크린샷을 붙여넣거나, 첨부를 쓰면 됩니다. 이미지는 본문에 삽입되고 나머지는 모두 첨부 패널에 떨어지며, 페이지 헤더의 클립 숫자가 그리로 데려다줍니다. 전체 이야기는 끌어다 놓으면 끝: 파일이 Archyl 문서로 들어옵니다에 있습니다.
텍스트 상자를 굳이 다시 설계하는 이유
Archyl이 할 일은 아키텍처 모델을 코드에 충실하게 유지하는 것이고, 그 부분은 디스커버리가 알아서 합니다. 모델을 둘러싼 글에는 그런 도움이 없습니다. 그 큐가 왜 거기 있는지 설명하는 ADR, 온보딩 페이지, 런북. 그것들이 계속 사실로 남는 건 누군가 계속 써 주기 때문일 뿐이고, 글 쓰는 자리가 사람과 싸우면 사람은 덜 씁니다.
모달은 매번 어김없이 걷히는 작은 세금이었습니다. 이제 없습니다.
로그인해서 아무 프로젝트에서나 문서를 열고, 페이지에서 E를 눌러 보세요. 켤 것도, 마이그레이션 단계도 없습니다. 페이지와 폴더와 첨부 파일은 두고 간 자리에 그대로 있습니다. 기능 가이드는 문서와 ADR에 있습니다.