DODO IS DODO

    블로그 새 단장

    Journal DIY

    오랜 숙원 사업이었던 블로그 뜯어 고치기를 드디어 해냈다! 거의 2~3년 전부터 하고 싶었는데 미루고 미루다가 지금에 이르러버렸다.

    고친 이유

    디자인이 별로라서

    그 전 블로그는 16년도에 만들었고 디자인도 만드는 당시의 디자인을 그대로 쓴건데 그땐 그냥 블로그를 하나 만든다는 생각에 바빴고 디자인은 만들고 난 다음에 손 볼 생각이었는데 역시나 그런 일은 일어나지 않는다.

    그 디자인이 왜 별로인지 설명하려니 갑갑하다. 그냥 처음부터 끝까지 엉망이라서 뭐라고 설명할 수도 없다. 그래서 그냥 안 예뻐서로 퉁치련다.

    느려서

    그 전 블로그가 극단적으로 느리지는 않지만 느리긴 느렸다.

    글쓰기가 불편해서

    16년도에 처음 블로그를 만든 이후 되게 많은 글쓰기 플랫폼에다가 글을 써왔다. 에버노트부터 애플 메모, 구글 킵, 노션 등등등… 각기 장단이 있다.

    결국 정착하게 된게 Obsidian이다. 길게 쓰기 싫으니 장점 몇개만 말하자.

    옵시디언의 장점과 블로그 글쓰기 불편한거랑 뭔 관계냐고 하겠지만 내 블로그 글은 블로그의 글쓰기에 바로 쓰지 않고 앞서의 글쓰기 플랫폼에 먼저 글을 쓰고 블로그에 옮긴건데 이게 통합된 과정이다보니 글쓰기가 불편하면 블로그에 글 올리기도 불편하다. 그리고 글을 쓰고 블로그에 글을 올리고 만약 글에 오타가 있거나 글을 수정하고 싶어지면 블로그에 글을 수정하고 해당 부분을 다시 블로그에 가서 수정하는 것이 매우 번거롭다.

    옵시디언도 양쪽 다 수정해야하는 건 마찬가지 아니냐고? 아니다. 지금 내 블로그는 옵시디언에 글을 쓰면 그 내용이 자동으로 블로그에도 써진다.

    마크다운

    16년도에 내 블로그의 시작은 프로그래밍 뭐시깽이 블로그였지만 이제와서 보면 그냥 신변잡기 블로그이기 때문에 이 글을 읽는 대부분의 독자가 마크다운이 뭔지 잘 모를 것이기에 약간만 설명한다.

    마크다운은 정해진 문법에 따라 텍스트를 작성하며 지금 이 블로그처럼 MS워드와 같은 포맷 형태로 글을 렌더링(화면을 그려준다는 뜻) 할 수 있게 해준다.

    1. 숫자 목록
    2. 작성

    위의 링크 삽입도 있고 아래처럼 사진도 넣을 수 있다.

    3490389A-73FA-4D60-8419-D01E034ED916_1_105_c

    제한된 포맷으로 꽤나 간결하게 글을 작성할 수 있어서 편리하다.

    위에 썼던 글이 사실 이런 형태로 작성된 것이다.

    ### 마크다운
16년도에 내 블로그의 시작은 프로그래밍 뭐시깽이 블로그였지만 이제와서 보면 그냥 신변잡기 블로그이기 때문에 이 글을 읽는 대부분의 독자가 마크다운이 뭔지 잘 모를 것이기에 약간만 설명한다.

[마크다운](https://en.wikipedia.org/wiki/Markdown)은 정해진 문법에 따라 *텍스트*를 작성하며 지금 이 **블로그**처럼 MS워드와 같은 포맷 형태로 글을 렌더링(화면을 그려준다는 뜻) 할 수 있게 해준다.

- 목록
- 작성부터

1. 숫자 목록
2. 작성

위의 링크 삽입도 있고 아래처럼 사진도 넣을 수 있다.

![3490389A-73FA-4D60-8419-D01E034ED916_1_105_c](./imgs/3490389A-73FA-4D60-8419-D01E034ED916_1_105_c.jpeg)

    이걸 다시 한번 변환하면 아래와 같은 HTML이 된다.

    <h3>마크다운</h3>
<p>16년도에 내 블로그의 시작은 프로그래밍 뭐시깽이 블로그였지만 이제와서 보면 그냥 신변잡기 블로그이기 때문에 이 글을 읽는 대부분의 독자가 마크다운이 뭔지 잘 모를 것이기에 약간만 설명한다.</p>
<p><a href="https://en.wikipedia.org/wiki/Markdown">마크다운</a>은 정해진 문법에 따라 <em>텍스트</em>를 작성하며 지금 이 <strong>블로그</strong>처럼 MS워드와 같은 포맷 형태로 글을 렌더링(화면을 그려준다는 뜻) 할 수 있게 해준다.</p>
<ul>
<li>목록</li>
<li>작성부터</li>
</ul>
<ol>
<li>숫자 목록</li>
<li>작성</li>
</ol>
<p>위의 링크 삽입도 있고 아래처럼 사진도 넣을 수 있다.</p>
<p><img alt="" src="/static/img/3490389A-73FA-4D60-8419-D01E034ED916_1_105_c-GVO6RAOT.jpeg"></p>

    이런 형식의 HTML 파일로 변환되고 다시 그걸 화면에 렌더링하면 지금의 블로그 글이 되는 것이다.

    이게 매우 편리한게 그 전에 가장 애용하던 애플 메모의 글을 블로그에 복붙하면 포맷팅이 깨져서 다시 직접 손보는 과정이 필요하거나 그냥 귀찮아서 손 보지 않았는데 이제 그런 문제가 없는 것이다. 옵시디언의 글이 바로 블로그 포맷으로 바뀌니 프로그래머라면 당연하게도 내가 옵시디언에 쓴 글이 자동으로 블로그에 옮겨지도록 구현하면 매우 편하게 블로그를 관리할 수 있게 된다.

    나에게 알맞는 도구를 만드려고

    드넓은 이 세상에 이미 내가 필요로 하는 기능들의 대부분을 수행할 수 있는 도구는 많지만 나에게 알맞는 도구라는 것은 내가 만들어야한다. 사실 이제 인생의 길을 바꾸면서 만드려고 하는 것도 나에게 안 맞은 도구, 그러면서 남들에게도 영감이 되는 도구를 만드려고 하는 것이다보니 블로그 또한 나의 요구에 온전히 부합해야한다. 앞서 말한 글을 쓰는 방식부터, 인터페이스, 디자인 하나하나까지 나의 요구 사항에 부합하는 도구를 만들고 싶었다.

    디자인에 대해서

    간략한 디자인 목표

    먼저 밝히는 건데 디자인에 대해서 아무것도 몰라서 말이 좀 엉성할 수 있다는 것을 양해바란다. 블로그를 디자인할 때 가장 중점적으로 뒀던 것은 미니멀리즘이다. 요즘 너무 많은 것들이 우리의 정신을 어지럽힌다. 당장 네이버를 들어가보면 너무 많은 섹션과 각기 다른 목표에 쓰인 텍스트들, 그리고 번쩍이는 광고들은 정말로 해롭다. 적어도 내 블로그에서는 그냥 시각적으로 가장 간결한 포맷에서 글만 즐길 수 있으면 좋겠다는 마음에 미니멀리즘 디자인을 목표로 삼았다.

    미니멀리즘

    미니멀리즘은 어려웠다. 최대한 단순하게 만들면 깔끔할 줄 알았으나 이미 모던 디자인에 눈알이 절어있어서 그게 쉽지가 않다. 이게 직접 해보면 안다. 일반 텍스트와 링크와 구분을 주기 위해서 약간 어둡게 채도 빠진 파란색이나 빨간색을 쓰면 갑자기 정신이 없어진다. 각기 다른 섹션을 구분하기 위해 글자 크기를 달리하면 정신이 없어진다. 이런 걸 해소하기 위해서 섹션 박스로 구분하거나 그러면 다양한 사이즈의 박스가 생겨서 정신이 사나워진다.

    오해는 하지 말아야하는게 디자인 측면에서 못 났냐하면 그건 아니다. 사실 적당히 빠데질하면(문질어대면) 모든 것들이 그럴 듯해보인다. 적당히 우아하게 동작하는 애니매이션을 넣으면 힙해보이기도 한다. 그런데 미니멀리즘은 그런게 아니더라. 미니멀리즘은 최소한의 구성요소만으로 자신의 디자인 철학을 녹여내는 일이었다. 블로그의 예를 보자. 맨 위에 header로 존재하는 DODO IS DODO와 글 카테고리, 그리고 약간 회색줄과 본문의 제목과 태그와 작성일. 그리고 본문의 시작. 이 모든 것들을 표현하기 위해서 나에게 주어진 자원은 글자 크기, 검은색에서 회색까지 이어지는 칼라 팔레트, 폰트 웨이트, 그리고 여백 뿐이다. 이 제한된 자원으로 내 블로그에 들어온 사람들이 내가 기대하는 시각적 경험을 얻기를 바란다. 그걸 달성하기 위해서는 각 구성 요소가 어떤 목표를 지니고 어떤 의미를 지니는지 분명해야한다. Header는 어떤 목적을 지니고 있지? 시각적으로는? 기능적으로는? 자주 눌러야하나? 클릭을 했을 때 시각적 피드백이 필요한가? 이런 것들에 대한 고민이 있어야지만 헤더 각 파트의 글자크기와 여백을 정할 수 있는 것이다. 그렇게 헤더가 정의되고 나면 본문도 마찬가지있다. 헤더와 본문과의 관계부터 시작해서 이 글을 읽는 독자들의 문해력과 활자에 대한 친숙도에 따라서 폰트, 폰트 크기, 줄간격, 자간 같은 것들이 결정된다. 지금 친구가 일하는 롱블랙에 어마무시한 폰트 크기와 줄간격을 보면 그 대비를 분명히 알 수 있을 것이다.

    사실 고민할 건 진짜 끝없이 많다. 요즘 모든 웹사이트의 트래픽의 90% 이상이 모바일에서 나오기에 이 블로그 또한 모바일 디바이스부터 노트북, 4K 모니터, 21:9 5K 모니터까지 모든 해상도와 화면비에 대한 고려가 필요하다. 중요한 건 최소한의 요소로 말이다! 그렇게 섬세하게 만지지는 않았지만 최대한 그런 부분을 반영하려고 노력했다

    유저와의 상호작용도 중요하다. 미니멀리즘은 딱 단면으로 보이는 이미지만 고려해서는 안 된다. 유저와 블로그 간의 상호작용 또한 간결해야한다. 헤더에 있는 About, Works, Posts의 경우를 고려해보자. 이게 가로가 긴 16:9 화면에서는 큰 문제가 없지만 세로로 긴 모바일 디바이스에서는 경우에 따라서 줄바꿈이 일어날 수 있다. 이런 문제를 해소하기 위해 일반적으로 사용하는 방법은 작은 세로 화면일 때 About, Works, Archive를 보여주는게 아니라 ≡ 이런 버튼을 놔두고 터치 시 드롭다운으로 메뉴가 나오는 방식이다. 이런 방식을 정말로 싫어하는데 그 이유는 첫째 저 버튼을 누르기 전에는 내가 무엇을 얻게 될 지 전혀 예상이 가지 않고 둘째 드롭다운이 다른 요소들을 덮으면서 시각적으로 지저분해기 떄문이다. 내가 취한 방법은 일단 새로 화면에서 글자의 크기를 줄여 최대한 줄 바꿈이 일어나지 않도록 하는 것이다. 차후에 항목이 더 추가될 것인데 이때는 아마 메인 페이지를 지금처럼 최신 글을 보여주지 않는 방식으로 해서 네비게이션의 창구를 하나 더 만들고 난 이후 상위에 네비게이션은 계속 간략하게 유지할 수 있도록 할 예정이다. 마찬가지의 일이 Archive 페이지에서도 일어난다. 글을 찾기 위해 스크롤을 내리는게 불편하니까 각 년도를 클릭하면 글들이 나타났다가 년도를 누르면 다시 글이 안 보이도록 할까? 썩 나쁘지는 않은데 최대한 플랫한 화면에 모든 정보가 플랫하게 제공하는게 목표이기에 그렇게 하지는 않았다. 대신에 오래된 글을 보고 뒤로 가기를 누를 때 그 전에 스크롤 했던 위치를 유지시켜주어 최대한 유저 덜 불편하도록 노력했다.

    각 요소의 크기와 위치도 그렇다. 각 요소의 크기를 정해진 규칙 없이 픽셀 단위로 조정을 하게 되면 전체적인 비례가 깨지게 된다. 만약 비례를 다 맞추더라도 추가적인 수정 과정에서 다시 픽셀 단위의 조정이 들어가게 되면 다시 다른 요소들과의 비례가 다 깨지게 된다. 그렇기에 미니멀리즘에서 모듈러한 디자인을 강조하는 것이다. 크기나 거리에 대한 정해진 디자인 목표 아래 만들어진 단위를 바탕으로 조정이 있어야지만 생산성 있고 일관적인 디자인을 수행할 수 있다. 이 블로그 또한 그렇다.

    현업 디자이너가 보면 뻔한 이야기 길게한 것 같긴 한데 그냥 일자무식 공대생의 좌충우돌이라고 생각하고 봐줘라.

    빠데질한 모더니즘?

    요즘 들어서 모던한 디자인이 그렇게 싫더라. 매끈한 선과 마감, 안정적인 비율은 정말 지루하고 숨막힌다. ‘그러면 당장 니 블로그는 뭔데?‘라고 묻는다면 나도 그 전까지는 미니멀리즘과 빠데질한 모더니즘을 구분하지 못 했다. 이렇게 블로그를 만들고서야 조금이나마 그 차이를 이해할 수 있게 됐다.

    미니멀리즘 목표로 블로그를 디자인할 때 가장 어려웠던 지점은 최소한의 요소만을 사용한다는 것이다. 이게 중요한 지점이다. 사실 대부분의 웹사이트이건 현대 디자인은 최소한의 요소만으로 표현하기가 매우 어렵다. 그 이유는 다음과 같다.

    첫째, 상업적으로 성공적인 상품을 최대한 많은 소비자 층을 안을 수 있어야하기 때문에 최대한 가장 정규분포 안쪽에 있는 사람들의 편의성과 시각적 만족감을 충족시키기 위해 노력해야한다. 이게 경우에 따라서는 그 사람들에게 익숙한 인터페이스일 수도 있고 약간 요란하게 큰 네비게이션 목록일 수도 있다.

    둘째, 대부분의 자본주의 상품을 대체재가 존재하기에 자신의 독점적 경쟁 위치를 확보하기 위해서는 자신만의 색이나 요소를 깔끔한 디자인에 부여해야한다. 이게 아리까리한 부분인데 색을 넣는다고 미니멀니즘이 아닌 것은 아니다. 근데 어마어마한 노력을 들이지 않고 첫째의 대중 요구를 충족시키려는 동시에 자신의 아이덴티티를 넣어버리면 디자인 요소가 너무 많아지기 쉽상이다.

    셋째, 자본주의는 모든 것을 상품화하며 플랫폼은 모든 상품을 편입할 수 있어야한다. 이게 아마 미니멀리즘과 빠데질한 모더니즘이 유사해 보이지만 근본적으로 다른 이유이다. 모든 것이 상품화 되는 이 시대에 모든 상품을 담기 위해서는 각 상품의 개별성을 최대한 빠데질해서 간결하고 통일성 있게 틀 안에 넣어야한다. 이때 이 간결함, 표준화의 대한 지향을 미니멀리즘을 떠올리게 하지만 그 목적은 간결한 디자인이 아니다. 빠데질의 목적은 하나의 개체가 무한한 상품을 최대한 표준화된 방식으로 끌어안기 위한 것이다. 네이버를 보면 쉽게 이해간다. 뉴스부터 웹툰, 인플루언서 블로그, 동영상, 지식인, 쇼핑 등등 진짜 무한하게 많은 서비스를 최대한 간결한 구조 안에 넣으려고 노력한다. 문제는 그 결과가 지저분할 뿐이지. 블로그도 마찬가지이다. 하나의 주제가 아니라 다양한 주제에 대해서 컨텐츠를 안으려고 노력할수록 빠데질이 더욱 필요해질 뿐이다. 이건 내가 지금 하고 있는 고민이기도 하다.

    어릴 적 아빠의 이야기

    여담으로 어릴 적 아버지 이야기를 해본다. 우리 아버지는 워커홀릭이시다. 항상 아침 7시 전에 출근해서 밤 10~11시에 퇴근하셨고 주말에도 일을 하러 직장에 나가시곤 하셨다. 하지만 아버지는 직장에 가서 일했으면 일했지 집에서도 일을 하지는 않으셨다(온갖 공부는 하셨지만,,,). 그런 아버지가 내 기억에 단 한번 집에서도 일을 하신 적이 있었다. 내가 중학생 때였나? 주말 낮에 아버지가 거실 소파에 기대서 노트북으로 작업을 하고 계셨다. 난 아버지가 일하는 모습을 본 적이 없기에 신기해서 아버지께 다가가 묻는다. ‘아버지 모하세요?‘. 아버지는 대뜸 화내신다. ‘도현아 넌 이런 식으로 일하지마라’. 좀 황당했지만 난 다시 묻는다. ‘왜요?‘. 아버지는 부하직원이 만든 것으로 추정되는 PPT를 가리키며 말하신다. ‘이거 봐라 뭐가 문제인지 안 보이냐?‘. 나는 PPT를 언뜻 훓어봤지만 별로 이상은 없어 보였다. 내용이 이상한가? 잘 모르겠어서 모르겠다고 대답한다. 그러니 아버지가 ‘이것도 안 보이냐?‘라고 분개하면서 PPT안의 글자 위치를 1픽셀씩(정확히는 픽셀이 아니지만) 옮기면서 ‘디자인이 엉망이잖아!’하고 분개하셨다. 난 속으로 미치셨나, 부하 직원 불쌍하다라고 생각하면서 ‘아 네’라고 말하곤 자리를 피했다.

    그런데 언젠가부터 내가 그러고 있다.

    차후의 블로그

    이후 블로그는 음향 소프트웨어, 음향에 대한 글들을 쓸 것이다. 모든 사람들이 이해할 수 있게 글을 쓸 것이며 Javascript를 가지고 만든 비쥬얼 데모 또한 제공할 예정이다.

    근데 이 블로그는 독자들이 그런 것에 관심이 없다. 잘은 모르지만 나에게 의견을 보내주는 독자는 문선생님과 주변 친구들, 그리고 전,,,여친들,,,, 뿐인데 갑자기 블로그를 그렇게 운영해도 되는가 싶다(심지어 친구의 남친도 내 블로그에 들어오더라. 그 덕에 전남친이 됐지만).

    당분간은 신변잡기 글과 음향에 대한 글을 여기에 같이 올릴 예정인데 이게 이상해지면 그때 다시 생각해보겠다.

    Go to Archive