CLIEN

본문 바로가기 메뉴 바로가기 보기설정 테마설정
톺아보기 공감글
커뮤니티 커뮤니티전체 C 모두의광장 F 모두의공원 I 사진게시판 Q 아무거나질문 D 정보와자료 N 새로운소식 T 유용한사이트 P 자료실 E 강좌/사용기 L 팁과강좌 U 사용기 · 체험단사용기 W 사고팔고 J 알뜰구매 S 회원중고장터 B 직접홍보 · 보험상담실 H 클리앙홈
소모임 소모임전체 ·굴러간당 ·아이포니앙 ·주식한당 ·MaClien ·일본산당 ·방탄소년당 ·야구당 ·자전거당 ·개발한당 ·안드로메당 ·노젓는당 ·이륜차당 ·소시당 ·소리당 ·나스당 ·캠핑간당 ·육아당 ·창업한당 ·찰칵찍당 ·패스오브엑자일당 ·이브한당 ·걸그룹당 ·심는당 ·젬워한당 ·소셜게임한당 ·달린당 ·물고기당 ·리눅서당 ·퐁당퐁당 ·사과시계당 ·총쏜당 ·콘솔한당 ·바다건너당 ·IoT당 ·골프당 ·가상화폐당 ·시계찬당 ·키보드당 ·3D메이킹 ·X세대당 ·ADHD당 ·AI당 ·AI그림당 ·날아간당 ·배드민턴당 ·농구당 ·블랙베리당 ·곰돌이당 ·비어있당 ·FM당구당 ·블록체인당 ·보드게임당 ·활자중독당 ·볼링친당 ·냐옹이당 ·문명하셨당 ·클래시앙 ·클다방 ·요리한당 ·쿠키런당 ·대구당 ·DANGER당 ·뚝딱뚝당 ·디아블로당 ·개판이당 ·동숲한당 ·날아올랑 ·전기자전거당 ·e북본당 ·갖고다닌당 ·패셔니앙 ·도시어부당 ·FM한당 ·맛있겠당 ·포뮬러당 ·안경쓴당 ·차턴당 ·땀흘린당 ·하스스톤한당 ·히어로즈한당 ·인스타한당 ·KARA당 ·꼬들한당 ·덕질한당 ·어학당 ·가죽당 ·레고당 ·LOLien ·Mabinogien ·임시소모임 ·미드당 ·밀리터리당 ·땅판당 ·헌팅한당 ·오른당 ·영화본당 ·MTG한당 ·노키앙 ·적는당 ·방송한당 ·PC튜닝한당 ·그림그린당 ·소풍간당 ·라즈베리파이당 ·품앱이당 ·리듬탄당 ·Sea마당 ·SimSim하당 ·심야식당 ·윈태블릿당 ·미끄러진당 ·축구당 ·나혼자산당 ·스타한당 ·스팀한당 ·파도탄당 ·테니스친당 ·테스트당 ·빨콩이당 ·공대시계당 ·여행을떠난당 ·터치패드당 ·트윗당 ·VR당 ·WebOs당 ·위스키당 ·와인마신당 ·WOW당 ·윈폰이당
임시소모임
고객지원
  • 게시물 삭제 요청
  • 불법촬영물등 신고
  • 쪽지 신고
  • 닉네임 신고
  • 제보 및 기타 제안
© CLIEN.NET
공지[점검] 잠시후 서비스 점검을 위해 약 30분간 접속이 차단됩니다. (금일 18:15 ~ 18:45)

모두의공원

[소개] 소소하게 Markdown(.md) 에디터/뷰어를 만들었습니다 5

2
데이스타777
729
2026-09-11 01:07:17 수정일 : 2026-09-11 01:07:57 221.♡.58.19

AI작업 많이 하다보니까. 마크다운(.md) 파일이 자꾸 쌓이더라구요.그래서 TUI로에디터 만들어서 쓸만한 거 같아 공유드립니다. (오늘은 터미널 버전만 공유드리고, 다음에는 데스크톱에디터 버전으로 맥/윈도우/리눅스용 UI버전 공유할께요. 이건 아직 좀 더 개발해야해서)


Markdown 파일을 자주 열어보거나, README/메모를 터미널에서 관리하시는 분들께 소개해봅니다. (MIT 라이센스입니다. 무료고 수정해서 쓰셔도 됩니다)


제가 만든 `mdok-cli`는 `.md` 파일을 터미널에서 읽고, 편집하고, 바로 미리볼 수 있는 작은 TUI 에디터입니다. (마우스로 버튼클릭이나 스크롤 등이 됩니다)

이름은 Markdown OK의 줄임말입니다.


이런 식으로 씁니다 (노드랑 npm이 있어야해요)


npm install -g @daystar7777/mdok


mdok README.md       # 파일 열기

mdok                 # 마지막 세션 이어서 열기

mdok view README.md  # 터미널용 예쁜 출력



실행하면 왼쪽에는 파일/목차가 나오고,(mdok 좌측의 화살표를 누르면 나옵니다) 가운데 화면은 분할 편집·소스 편집·읽기 보기로 전환할 수 있습니다. 탭을 여러 개 열어둘 수도 있고, 종료 후 다시 실행하면 열린 탭과 커서 위치도 복원합니다.




분할 화면에서는 Markdown을 고치면서 오른쪽 미리보기가 바로 따라옵니다.


mdok-real-current.jpg



소스만 넓게 보고 편집할 수도 있습니다.

mdok-real-source.jpg




읽기만 할 때는 Markdown 렌더링 결과만 깔끔하게 볼 수 있습니다.

mdok-real-viewer.jpg




## 왼쪽 사이드바

mdok-real-sidebar.jpg



화면 왼쪽 위의 `<` 버튼(터미널 폭에 따라 `[>]`로 보일 수 있음)을 누르면 사이드바가 열립니다. 여기에 최근에 열었던 파일, 현재 문서의 목차, 작업 폴더 안의 Markdown 파일 목록이 나옵니다.


파일을 여러 개 오갈 때나 긴 문서에서 목차를 눌러 이동할 때 쓰는 영역이고, 본문을 넓게 보고 싶을 때는 같은 버튼으로 다시 접을 수 있습니다. 키보드로는 `Ctrl+O` 다음 `b`를 누르면 됩니다.


## 기존 Markdown 도구와 조금 다른 점


Markdown을 편집할 때 미리보려고 브라우저를 따로 열거나, 문서를 다른 서비스에 붙여넣는 과정이 번거로워서 만들기 시작했습니다.


- 소스 편집과 실시간 미리보기

- 한국어/영어 UI, 한글·한자·이모지 폭 처리

- 탭, 최근 파일, 목차 사이드바, 세션 복원

- 찾기/바꾸기, Markdown 린트, 표 정리, HTML 내보내기

- 테마 5종과 줄번호, 기본 Vim 모드

- 저장 시 원자적 기록, Git 저장소에서는 자동 커밋/푸시/풀 보조


특히 터미널에서 한글이 들어간 문서를 편집할 때 커서가 한 칸씩 밀리는 일이 꽤 거슬렸는데, 표시 폭 기준으로 계산하도록 따로 처리했습니다.


## 읽기만 할 때는 더 단순하게


TUI를 띄우지 않고 Markdown을 터미널에서 보기 좋게 렌더링하는 `view` 명령도 넣었습니다.



mdok view README.md | less



파이프에 연결해서 쓰거나, SSH로 접속한 서버에서 README나 작업 메모를 확인할 때 편합니다.


## AI 기능은 BYOK 방식입니다


API 키를 프로그램에 넣어둔 방식이 아니라, 본인이 가진 API 키를 환경변수로 넣는 방식입니다.


export MDOK_API_KEY=sk-...

mdok ask README.md -q "이 문서 3줄로 요약해줘"



TUI 안에서도 열린 문서에 질문하거나 선택 영역을 AI로 고쳐쓰고, 변경 전후 diff를 확인한 뒤 적용할 수 있습니다. OpenAI 호환 API 주소와 모델을 설정할 수 있어서, 다른 호환 엔드포인트나 로컬 서버에도 연결할 수 있습니다.


다만 AI 기능은 문서가 외부 API로 전송되는 기능인 만큼, 민감한 문서에는 주의가 필요합니다. 앱에서 공용 키를 제공하는 방식은 아니고, 사용자가 직접 키와 전송 대상을 선택합니다.


## Git과 QR


Git 저장소 안에서 사용하면 저장 후 자동 커밋을 만들고, 별도 패널에서 push/pull/수동 commit을 할 수 있습니다. Git을 원하지 않으면 끌 수 있습니다.



- GitHub: https://github.com/daystar7777/mdok-cli

- npm: https://www.npmjs.com/package/@daystar7777/mdok


Node.js 22 이상이 필요합니다. MIT 라이선스이고, 아직 0.x대라 기능이나 UI는 계속 다듬고 있습니다.


터미널에서 Markdown을 많이 보시는 분들이라면 한 번 써보시고, 특히 키 조작이나 미리보기 쪽에서 불편한 점을 알려주시면 다음 버전에 반영해보겠습니다.





데이스타777 님의 게시글 댓글
SIGNATURE
언제나 지금처럼 ( 개인위키 : daywiki.kr )
서명 더 보기 서명 가리기
  • 주소복사
  • Facebook
  • X(Twitter)
댓글 • [5] 을 클릭하면 간단한 회원메모를 할 수 있습니다.
깨끗이
IP 182.♡.231.161
01:20 2026-09-11 01:20:33
·
저도 가끔 markdown으로 문서 작업하는 경우가 있는데 알아보니 md 형식도 앱에 따라서 조금씩 달라서 호환이 안 되기도 하는 것 같아요. pandoc, vscode, 등등. 특히 표나 latex 지원에서 달라지는 듯 한데, latex 지원도 하시나요? 뭔가 호환 문제에서 여러 가지 버전을 지원하는 것 또는 어떤 형식을 지원하는지 명확하게 명시하는 것도 좋을 것 같습니다. 근데 TUI에서 하면 latex는 조금 한계가 있을 것 같긴 하네요.
데이스타777
IP 130.♡.18.21
01:31 2026-09-11 01:31:05 / 수정일: 2026-09-11 01:45:13
·
@깨끗이님 아 좋은 조언 감사합니다. 최대한 해보는 방법을 찾아보겠습니다.

현재 공개 버전은 기본 Markdown과 GFM 스타일 표를 중심으로 지원합니다. LaTeX 수식은 소스로 작성·보존할 수 있지만, TUI 안에서 조판된 수식으로 보여주는 기능은 아직 지원하지 않습니다.
지원 범위와 제한을 명확히 문서화하고 있으며, 개발 버전에는 Markdown 형식을 선택하는 Pandoc 내보내기와 VS Code 연결을 추가했습니다. 수식은 HTML·LaTeX·PDF 출력으로 연결하는 방향입니다. 다만 모든 앱과 완전 호환된다고 약속하기보다는, 실제 변환 결과를 검증하며 지원 범위를 넓히려고 합니다. 문제가 되는 표나 수식 예시를 주시면 테스트에 반영하겠습니다.
깨끗이
IP 182.♡.231.161
03:00 2026-09-11 03:00:33
·
@데이스타777님 네... 확인되면 보내드릴께요. 한 가지 제가 필요했던 기능과 아이디어를 드리자면, latex의 경우에는 문법 highlight하는 기능과 인식되는 명령과 그렇지 않은 명령 구분하는 기능이 있으면 좋을 것 같습니다(예를 들어 깨진 latex 안에 있으면 오류라고 status bar에 표시하거나... latex을 빨간색으로 하거나... 그런데 생각해보니 프로그램에 따라 $$-$$, \[, \] 표시도 한 쪽만 지원해서 find-replace로 바꿔 줬던 기억이 있네요). latex은 mathjax 등 엔진에 따라 지원되는 패키지 등이 다르다고 들었습니다. 그리고 제가 필요해서 한번 구현해봐 하다가 말은 것은 git diff 또는 diff를 md syntax 고려하면서 보여주는 기능인데 이 기능이 있으면 md 파일 서로 비교할 때 매우 편할 것 같습니다. 비슷한 기능을 하는 프로그램이 몇 개 있었던 것 같은데, latex 포함 모두를 비교하는 기능은 제공하지 않았던 것으로 기억합니다.
metermatters
IP 125.♡.131.137
01:40 2026-09-11 01:40:47
·
저도 읽는건 glow로 편집은 nano로 하다가, 편집기를 만들어볼까 했는데 결국 번거로운 건 브라우징이라는 생각이 들어서 찾아보다 mc로 정착했습니다. DOS시절 ncd랑 비슷해서 왠지 익숙하기도 하고, 편집화면으로도 엔터 한 번으로 바로 들어갈 수 있어서 편한 것 같습니다.
데이스타777
IP 130.♡.18.21
01:54 2026-09-11 01:54:42
·
@metermatters님 좋은 힌트 주셔서 감사합니다. 기본을 뷰어로 바꾸고 엔터치면 에디팅 가능하게 바꾸어서 패치했습니다.

npm install -g @daystar7777/mdok@latest
mdok --version
으로 설치 가능합니다
새로운 댓글이 없습니다.
이미지 최대 업로드 용량 15 MB
업로드 가능 확장자 jpg,gif,png,jpeg,webp
지나치게 큰 이미지의 크기는 조정될 수 있습니다.
목록으로
글쓰기
목록으로 댓글보기 이전글 다음글
아이디  ·  비밀번호 찾기 회원가입
이용규칙 운영알림판 운영소통 재검토요청 도움말 버그신고
개인정보처리방침 이용약관 책임의 한계와 법적고지 청소년 보호정책
©   •  CLIEN.NET
보안 강화를 위한 이메일 인증
안전한 서비스 이용을 위해 이메일 인증을 완료해 주세요. 현재 회원님은 이메일 인증이 완료되지 않은 상태입니다.
최근 급증하는 해킹 및 도용 시도로부터 계정을 보호하기 위해 인증 절차가 강화되었습니다.

  • 이메일 미인증 시 글쓰기, 댓글 작성 등 게시판 활동이 제한됩니다.
  • 이후 새로운 기기에서 로그인할 때마다 반드시 이메일 인증을 거쳐야 합니다.
  • 2단계 인증 사용 회원도 최초 1회는 반드시 인증하여야 합니다.
  • 개인정보에서도 이메일 인증을 할 수 있습니다.
지금 이메일 인증하기
등록된 이메일 주소를 확인하고 인증번호를 입력하여
인증을 완료해 주세요.