0572.txt

안녕하세요, 포프입니다.

저번 편에서 마크다운에 대해서 얘기를 했었어요. 근데 제가 또 최근에 마크다운 쪽 일을 열심히 하다가 굉장히 괴랄한 마크다운 스펙을 발견했습니다. 이게 원래 마크다운 스펙인지 나중에 CommonMark라든가 이런 게 나오면서 생긴 스펙인지 정확히 모르겠는데, 제가 대충 찾아본 바로는 마크다운 원래 스펙이라고 얘기를 들었어요. 근데 아닐 수도 있습니다. 중요한 건 대부분의 마크다운 변환기가 이렇게 돌기 때문에 한 번쯤은 얘기하고 넘어가는 게 좋을 것 같아서 얘기했어요.

마크다운을 사용하면 점 목록 아니면 숫자 목록 같은 걸 굉장히 많이 사용하게 돼요. 되게 유용하거든요. 사용하다 보면 어떤 경우에는 이 목록의 간격이 넓어지는 애들도 있고, 좁아지는 애들도 있고, 어떤 경우에는 들여쓰기한 것만 넓어지거나, 윗부분은 좁은 반면에 아랫부분은 넓은 경우도 있어요. 그러니까 이게 행간이라고 하나요? 레벨 따라서 달라지는 경우들이 있습니다.

정확히 말하면 문단 전, 후 간격이 달라져요. 그래서 '이게 대체 뭐지?'라고 하다가 그냥 대충 마크다운에서 고치려고 하면 모든 게 행간이 넓어지도록 점 목록 다음에 빈 줄 넣고, 점 목록 넣고 빈 줄 넣고 이렇게 해요. 모든 점 목록을 tight 하게 붙여놓는 게 아니라 그 사이마다 빈 줄 하나씩 넣는 거예요. 어떤 경우는 이게 읽기 편한 경우가 있어요. 대표적인 예가 제가 만들고 있는 코딩 표준. 깃허브에도 올라가 있고, 그리고 실제 저희 웹사이트에서 호스팅해놨죠. jekyll로 했습니다. 거기에 보면 실제 원본 문서에는 목록을 띄워놔요. 왜냐하면 점 목록 하나하나가 번호를 달기 위해서 있는 거고, 그 번호를 달면 문장 하나하나가 굉장히 길거든요? 그러면 띄워져 있는 게 제가 텍스트 에디터에서 보기 좋습니다. 근데 그게 아니라 일반적인 점 목록 형식, '자 이런 거를 지참하세요. 1번 지우개, 2번 연필, 3번 포프TV'. 이런 식으로 하는 거는 짧기 때문에 붙어 있는 게 문서 편집하기 훨씬 편합니다.

그러면 저는 여태까지 마크다운 문서를 편집할 때 그냥 그렇게 보기 편한 방식으로 줄을 띄우거나 안 띄우거나 했거든요? 그런데 이 두 가지가 HTML로 변환했을 때는 tight 한 리스트냐, 아니면 loose 한 리스트냐 이 두 개로 갈려요. 중간마다 빈 줄을 넣으면 loose 리스트로 만들어지고, 안 넣으면 tight 리스트로 만들어진다는 거예요. HTML에서 실제 태그가 어떻게 나오는지 보면 tight 리스트는 li 태그 옆에 그냥 텍스트가 들어가요. loose 리스트라고 하는 거는 li 옆에 p 태그가 들어가고 그다음에 텍스트가 들어가요. 그 차이인 겁니다. 그럼 '이거를 어떤 경우에 이렇게 작성하면 loose 리스트가 나오고 어떤 경우에 이렇게 작성하면 tight 리스트가 나오는구나? 그러면 내가 마크다운에서 예쁘게 작성해서 필요에 따라 관리를 잘해야지'라고 생각할 수 있어요.

그런데 이거의 단점이 몇 가지가 있어요. 가장 큰 단점은 하위 목록에서 들여쓰기할 때, 그러니까 ○ lv1, □ lv2 이런게 여러 개가 있을 때는 모든 게 되는데, 하위 목록이 하나만 있는 경우가 있거든요? 이럴 때는 얘를 컨트롤 못해요. 마크다운 표준상 안 돼요. 그러면 이거를 하기 위해서 뭔가 이상한 짓을 해야 해요. 되게 이상해져요. 그러면 이게 사실은 올바르게 점 목록을 사용하지 않는 경우일 수 있어요. 점 목록은 최소 2개 이상이 될 때 사용하는 게 올바른 문서 작성 방법이긴 하니까. 근데 대충 내부용으로 작성하다 보면 안 그럴 때가 있거든요? 그리고 편하니까 그냥 점 목록으로 예쁘게 정리하다 보면 그렇게 될 때가 있거든요? 아니면 숫자를 달기 위해 그렇게 할 때가 있거든요? 동작하지 않습니다. 기능적으로 불가능해요.

그게 첫 번째, 두 번째 제가 마크다운이 좋다고 한 이유 중의 하나가 이거였어요. '문서 구조를 정리할 수 있는 포맷이지, 문서의 스타일을 정리하는 건 아니다'. 근데 얘는 유독 문서의 스타일까지 책임지게 만들어 놓은 거예요. 한마디로 없어져야 할 표준인 거죠. 차라리 문서의 스타일이라고 하는 거는 HTML이 나왔을 때 CSS 파일로 관리를 해야 하는 거지, 내가 이런 목록은 갑자기 이렇게 크게 만들고 저런 목록은 작게 만들고 잘못된 얘기를 하는 거예요. 그래서 이거를 버려야 된다는 거죠.

그래서 저희 회사에서는 어떻게 했냐? 그냥 텍스트 파일에서 문서를 편집할 때 '니 눈에 피가 안 나는 방향, 가장 편한 방향으로 띄어 쓰려면 띄어 쓰고 붙여 쓰려면 붙여 쓰라. 우리는 tight 리스트, loose 리스트 신경 안 쓰겠다'라고 얘기했어요. 그 대신 우리가 만든 마크다운이 블로그나 웹사이트로 나갈 때는 이 마크다운을 변환한 HTML을 어딘가의 div 섹션에 넣거나 이럴 거예요. 그럼 결과적으로 그 div 섹션이 이 마크다운 자체의 컨테이너라는 얘기거든요? 그럼 이 컨테이너 밑에 들어간 다른 HTML 태그예요. 무슨 얘기를 하는지 CSS 하시는 분들은 알 거예요. 그럼 이 밑에 noose 리스트가 있을 수도 있고 tight 리스트가 있을 수도 있어요. 근데 그 둘의 차이는 뭐예요? li 밑에 있는 p 태그가 있냐 없냐의 차이예요. 그러면 아예 이 p 태그의 스타일을 없애버리자. 예를 들어서 li 속에 있는 p 태그 위에 여백 없고 아래에도 없고 아무것도 하지 않는 p 태그로 그냥 그렇게 만들어버리자. 그러면 어떻게 돼요? p 태그에 들어간 스타일은 사라지죠. li 태그에 들어간 스타일에 따라서 모든 자간이든 횡간이 다 결정이 되겠죠? 그래서 우리는 tight 리스트와 loose 리스트의 차이가 없어지는 겁니다. 무조건 다 기본값으로 tight 리스트로 들어가는 것 같죠? 시작은 거기예요. 근데 이 기본값을 바꾸고 싶다? 그러면 아까 말했던 위에 div 컨테이너 있죠? '이 컨테이너 밑에 있는 li는 바꿔라', '이 컨테이너 밑에 있는 li는 다르게 바꿔라' 이 두 가지만 있으면 되는 거예요. 이 컨테이너에 들어가 있는 클래스에 따라 그 클래스 밑에 있는 li는 이렇게, 이 클래스 아래쪽에 있는 다른 li는 저렇게 되는 겁니다. 그래서 'div 태그로 관리를 하자' 이겁니다. 저희 기본은 마크다운으로 작성한다면 일반적으로 블로그 포스트나 문서일 거고, 그러면 웹사이트나 블로그 같은 형식에서 눈이 가장 편한 거, 그럴 때는 loose 리스트. 점 목록 사이에 행 간격이 조금 더 있는 게 좋으니까 loose 리스트를 기본으로 했고, 이게 loose 리스트가 아닌 'tight 리스트를 언젠가 만들어야 한다' 그러면 이 마크다운을 포함하는 태그에 클래스를 하나 박아주고, 클래스 밑에 어딘가에 있는 li는 아까 말했던 p 태그에 들어간 스타일이 오버라이드를 하도록 CSS를 만들라고 했어요. 그래서 이거는 저희가 마크다운을 오랫동안 사용하고 나온 여러 가지 문제점에서 찾아낸 걸 보고 알려드린 겁니다. 그런 식으로 관리를 하면 마크다운에서 지원한다고 하니까 괜히 따라 해야 할 것 같은데, 그 표준은 무시하시는 게 문서 작성하는 데 가장 편하실 겁니다.

좀 도움이 됐어요? 요약하면 마크다운에서 리스트를 만들 때 사이에 한 줄을 넣냐 마냐에 따라 이게 loose 리스트가 될 수도 있고 tight 리스트가 될 수도 있다. 이게 첫 번째.

두 번째는 loose 리스트와 tight 리스트의 차이는 p 태그가 추가로 들어가냐 마냐다.

세 번째 마크다운을 작성할 때는 이런 거 신경 쓰지 말자. 그냥 작성자가 편한 방식으로 하자. 그리고 실제 스타일링은 웹에서 한다.

이게 결과적으로 중간에 li 밑에 들어가는 p 태그는 무조건 무시하고, li 태그를 오버라이드 할지만 결정하면 아마 '인생이 매우 편해질 거다'라는 게 마크다운 오래 사용한 저와 저희 회사의 많은 것들에 대한 결론이다. 저희 회사도 이렇게 지금 바꿔가고 있습니다.

포프였습니다.