[IT] 클로드 코드와 함께: 로그인 그 다음, 드디어 "에디터"를 만들다

[IT] 클로드 코드와 함께: 로그인 그 다음, 드디어 "에디터"를 만들다

안녕하세요, 가야태자 @talkit 입니다. ^^

어제는 클로드 코드와 함께 어드민 셋업과 로그인까지 만들었죠. 오늘은 드디어 로그인 이후에 만나는 진짜 화면 — 마크다운 에디터를 개발해 보았습니다. 이제야 정말 "에디터"라는 이름값을 하게 되었네요.

🎨 먼저 그림부터: 3단 구조

이번에도 코딩보다 디자인 시안을 먼저 받아보고 시작했습니다. 제가 머릿속에 그린 그림은 이랬습니다.

• 왼쪽: 폴더/문서 트리 (내 글들을 정리)
• 가운데: 마크다운 원본을 쓰는 소스 영역
• 오른쪽: 내가 쓴 글이 실시간으로 보이는 미리보기

즉 왼쪽에서 글을 고르고, 가운데서 쓰고, 오른쪽에서 바로 확인하는 구조죠. 클로드 코드가 시안을 이미지로 뚝딱 만들어 줬는데, 심지어 제가 말하지 않은 편집 툴바 아이콘까지 센스 있게 넣어놨더군요. ^^

거기에 제가 몇 가지를 더 요청했습니다.

• 툴바에 이미지 첨부와 줄구분(HR) 아이콘 추가
• 왼쪽 폴더 영역을 얇은 아이콘 네비게이션 바로도 쓸 수 있게
• 세 칸의 경계를 마우스로 끌어서 폭 조절
• 그리고 모바일도 고민 (좁은 화면에선 트리는 서랍처럼, 소스↔미리보기는 토글로 전환)

💾 오늘의 핵심: "글을 절대 잃어버리지 않게"

기능 중에 제가 가장 신경 쓴 부분입니다. 글 쓰다가 날려먹는 것만큼 허무한 일이 없잖아요. 그래서 저장 구조를 이렇게 기획했습니다.

1. 자동 저장(임시저장) — 타이핑을 멈추면 몇 초 뒤 서버에 자동으로 저장됩니다. 브라우저가 꺼져도 최신 내용이 남아 있어요.
2. 수동 저장(Save) — 버튼을 누르면 그 시점이 버전으로 박제됩니다. v1, v2, v3… 이렇게 쌓이죠.
3. 버전 히스토리 — 왼쪽 🕘 아이콘을 누르면 저장했던 버전 목록이 나오고, 원하는 버전으로 되돌리기도 됩니다.

핵심은 "작업본(임시저장)"과 "버전 스냅샷"을 분리한 것입니다. 자동저장은 작업본만 갱신하고, 버전은 절대 덮어쓰지 않는 영구 체크포인트로 남겨서 — 실수로 지워도, 브라우저가 죽어도 되살릴 수 있게요. DB 테이블도 documents(작업본) + document_versions(스냅샷) 구조로 나눠 설계했습니다.

작동을 curl로 하나하나 검증하는 것도 보여주더군요. "저장 → v1, 내용 안 바뀌면 저장 눌러도 v 그대로, 고치고 저장 → v2, 되돌리기 → 그 버전 내용 복구"… 이게 다 통과하는 걸 보니 안심이 됐습니다. ^^

👁️ 미리보기 엔진은 무엇으로?

여기서 제가 질문을 하나 던졌습니다. "앞으로 스팀잇 스타일, 깃허브 스타일, 티스토리 스타일 미리보기를 붙이고 싶은데, 이 라이브러리가 적당하냐?"

클로드 코드의 답은 markdown-it이 딱 맞다는 것이었습니다. 엔진은 하나로 두고, 플랫폼마다 "프로필(옵션 + 스타일)"만 갈아끼우는 구조로 가면 된다고요. 그래서 지금은 기본 프로필 하나지만, 나중에 GitHub / Steemit / Tistory 프로필을 추가만 하면 되는 구조로 미리 만들어 뒀습니다. 보안을 위해 렌더링 결과를 살균(DOMPurify)하는 것도 잊지 않았고요.

스팀잇 블로거인 저에게 딱 필요한 방향이라 아주 마음에 들었습니다. ^^

🛠️ 그 밖의 편의 기능

• 툴바: 굵게 · 기울임 · 취소선 · 제목 · 인용 · 코드 · 목록 · 체크리스트 · 링크 · 이미지 · 줄구분
• 단축키: Cmd/Ctrl + S 로 버전 저장
• 컬럼 리사이즈: 소스와 미리보기 비율을 마우스로 조절
• 로그인하면 Welcome.md 문서가 하나 자동으로 생겨 바로 써볼 수 있음

🐳 그리고 다시 도커로 배포

개발이 끝나고 어제처럼 도커로 재배포했습니다. 프론트엔드를 새로 빌드해서 nginx 컨테이너로 올리면 끝. 주소는 그대로 유지했습니다.

실제로 접속해서 폴더도 만들고, "첫번째 문서"도 하나 써봤는데 — 왼쪽에서 고르고, 가운데서 쓰고, 오른쪽에서 실시간으로 뜨는 게 정말 기분 좋더군요. 제목, 인용구, 코드블록까지 착착 렌더링되는 걸 보니 뿌듯했습니다. ^^

📝 마치며

어제 "문 앞의 자물쇠(로그인)"를 달았다면, 오늘은 그 안에 진짜 작업 공간(에디터)을 들여놓은 셈입니다. 자동저장과 버전 관리까지 갖췄으니, 이제 마음 놓고 글을 쓸 수 있게 됐네요.

아직 붙일 게 많이 남았습니다.

• 이미지 실제 업로드 (지금은 마크다운 문법만 삽입)
• 말씀드린 스팀잇 / 깃허브 / 티스토리 미리보기 프로필
• 검색, 문서 폴더 이동, 모바일 레이아웃 적용

오늘은 여기까지 하고, 다음 글에서 하루하루 진짜 프로그램의 모습을 갖춰가는 게 참 재미있네요.

차근차근 완성되어 가는 제 프로젝트에 많은 관심과 응원 부탁드립니다!

실제 프로그램은 저렇게 생겼습니다. ^^

배포를 어떻게 할것인가에 대한 고민을 하고 있습니다. ^^

감사합니다. 오늘도 클로드 코드, 수고 많았어요. ^^