본문 바로가기
C.W.K.
Stream
Lesson 04 of 04 · published

선택으로서의 마크업

~10 min · markup, by-choice, live-preview, stance

Level 0식은 초고
0 XP0/33 lessons0/12 achievements
0/100 XP to next level100 XP to go0% complete
"보이는 # 는 Rekindle 이 아직 안 숨긴 게 아냐. Rekindle 이 보여주기로 고른 거야."

빈틈이 아니라 태도

에디터에서 raw #** 를 보면 반사적으로 '아직 덜 만들었나 보네, 마크업을 안 숨겼어' 하고 읽게 돼. 마크다운으로 사는 사람한테는 그게 거꾸로 읽는 거야. 마크업을 보여주는 건 의도적인 태도거든. 그 문자에 의미가 있으니까, 숨기는 건 잡동사니를 치우는 게 아니라 정보를 없애는 일이야. 코드 에디터가 문법을 일부러 보여주는 것처럼, Rekindle 도 마크업을 일부러 보여줘.

마크업이 보여서 얻는 것

눈에 보이는 마크업은 믿을 수 있는 마크업이야. 디스크와 화면이 같으니까 저장할 때 놀랄 일이 없어. grep 도 돼서 ## 를 검색하면 H2 가 전부 나오고. 서식을 바꾸면 버전 관리에서 문자 변경으로 그대로 보이니까 diff 도 잘 읽혀. 같은 텍스트가 vault 에서도 에세이에서도 사이트에서도, 다른 어떤 마크다운 도구에서도 그대로 통하고. 마크업을 숨기는 모델은 렌더된 형태와 저장된 형태가 갈라지는 순간 이걸 전부 깨뜨려.

보이는 마크업이 주는 것:
  디스크 == 화면    저장 때 안 놀램
  grep 가능         '##' 검색이 모든 H2 를 찾음
  diff 친화적       bold 변경이 보이는 문자 변경
  이식 가능         같은 텍스트가 마크다운 있는 곳 어디서나 유효

Live Preview — 모습은 보고 소스는 지키고

제일 좋은 건 '마크업 보기' 와 '결과 보기' 중에 하나를 고를 필요가 없다는 거야. Live Preview 는 커서 없는 줄에선 효과를 렌더하고 커서가 놓인 줄에선 raw 마크업을 드러내. 그래서 읽을 땐 헤딩이 헤딩처럼 보이다가, 그 줄을 클릭해 들어가는 순간 편집하라고 # 가 다시 나타나. 렌더된 문서의 고요함과 소스의 정확함을 동시에 갖는 거지. 모드를 전환할 일도, export 단계도, 두 번째 표현도 없이. 이 한 사용자한테 source 모드에 decoration 을 얹은 방식이 raw 소스와 WYSIWYG 을 둘 다 이기는 이유가 여기 다 있어.

Code

Live Preview: 읽을 땐 렌더, 편집할 땐 raw·text
inactive 줄 (읽기):   Fire and Ash          <- 헤딩처럼 보임
active 줄   (커서):    # Fire and Ash        <- raw 마크업 드러남

inactive 줄 (읽기):   the fire catches       <- 'fire' 가 bold 로 보임
active 줄   (커서):    the **fire** catches   <- 별표 드러남

# 모델은 소스 하나고, 커서 위치에 따라 모습이 둘로 갈릴 뿐이야.
# 소스를 떠나는 일은 없어. 모습이 네 시선을 따라올 뿐이지.

External links

Exercise

헤딩과 bold 단어와 링크가 들어간 문단을 두 번 써봐. 한 번은 마크다운 소스로, 한 번은 WYSIWYG 에디터에서 하는 동작을 설명하듯이. 여기 클릭하고, 저거 bold 주고, 링크 넣고 하는 식으로. 그다음 물어봐. 어느 쪽을 grep 하고 diff 하고 다른 도구 셋에 붙여넣고 1년 뒤에 똑같이 재현할 수 있어? 그 답이 Rekindle 이 마크업을 보여주는 이유야.
Hint
둘 중 하나만 네가 온전히 통제할 수 있고, 어디로든 옮겨가고, 그 자체로 설명이 되는 산물이야. WYSIWYG 쪽 설명은 특정 앱의 버튼과 내부 모델에 기대고 있거든. 마크다운 소스는 어디서나 언제나 같아.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.