" 가독성이 좋다면 똥을 퍼질러도 그럴싸하다. "
가독성이 좋은 글은 읽기가 편하다.
그렇다면 어떻게 글을 써야 가독성이 좋아 질 수 있을까? 여러가지 요소들이 영향을 미치겠지만, 나는 이 글에서 크게 두가지로 나누어 분류하겠다. '내용'과 '디자인'.
여기서 내가 정의 하는 '내용'이란 글이 어떻게 쓰여졌는가에 관한 것 들이다. 맞춤법은 잘 지켜졌는지, 문장이 읽게 쉽게 간결한지, 문단이 적절하게 나뉘어졌는지, 불필요한 내용을 줄이고 목적을 매끄럽게 전달하는지... 이런 부분들은 여기서 설명하지 않을 것이다. 좋은 글쓰기에 관한 팁들은 어디서나 쉽게 찾아볼 수 있으니 궁금하다면 찾아보아라.
내가 설명하고자 하는 부분은 글의 디자인 요소이고, 거기서도 좀 더 세부적으로 들어가서 HTML과 CSS를 이용한 웹 디자인이다. 다만 누구나 쉽게 써먹을 수 있도록, 머리아픈 이론이나 원리는 제쳐두고, 웹에 대해 아무것도 모르는 게이들도 쉽게 적용할 수 있게끔 예제 위주로 적을 것이다.
물론 이 내용들은 개드립 외의 사이트에서 글을 쓸 때도, 해당 사이트가 html 글쓰기를 지원하고 있다면 얼마든지 써먹을 수 있다! 당장 개드립에서는 글쓰기를 눌러서 우측 상단에 보이는 'HTML편집기' 라는 녀석을 통해 가능하다.
1. 여백을 줘서 집중하기 좋게 꾸미기
눈썰미가 좋은 개드리퍼라면 느꼈겠지만, 이 글은 내용의 좌우로 여백이 배분되어있다. 이 여백은 데스크탑에서 좀 더 넓고, 모바일에서는 티가 안날만큼 은근하게 적용이 되고 있는데, 이렇게 글 전체의 좌우에 여백을 주는 법은 다음과 같다.
<div style="max-width:600px; margin:0 auto; line-height:28px; padding:15px;">
<!-- 들어갈 내용 시작 -->
쓰고 싶은 글을 여기에 적으세요.
<!-- 들어갈 내용 끝 -->
</div>
1. 개드립에서 글쓰기 버튼을 누르자마자 HTML편집기로 들어가라.
2. 그리고 위의 내용을 복사해서 붙여 넣어라.
3. 다시 HTML편집기 버튼을 한번 더 누르면 원래의 글쓰기 모드로 돌아올 수 있다.
4. 그러면 html 코딩언어는 보이지 않고, 자주색 글씨만 남을 것이다.
5. 자주색 글씨를 지우고 쓰고 싶은 말을 적으면 된다.
원리에 대해서 자세하게 기술하자면 복잡하므로, 참고해두면 좋을 정도의 간단한 사족만 달아 보겠다.
max-width:600px; 부분은 내용의 최대 가로길이를 600px로 제한한다는 뜻이다. 강제로 600의 크기를 갖는게 아니기 때문에 PC보다 더 작은 모바일 환경에서도 알맞게 줄어든다.
line-height:28px; 부분은 글자의 줄간격. 즉, 위아래 여백인 행간을 뜻한다. 숫자를 늘릴수록 늘어나고, 숫자를 줄일 수록 좁아진다. 이 글은 예제와 같이 28px의 행간으로 글을 썼다.
2. 글자를 양끝 정렬하기
조금 더 눈썰미가 좋은 개드리퍼라면 이 글의 양끝이 칼같은 간격으로 동일하게 맞춰져 있음을 볼 수 있다. 잘 이해가 가지 않을 게이들을 위해서 양끝 정렬한 글과 그렇지 않은 글을 비교해 보겠다.
문단 왼쪽 정렬
우리의 그 핵심 목표는, '올해 달성해야 될 것은 이것이다.' 하는 것으로 정신을 차리고 나아가면 우리의 그 어떤 에너지를 분산시키고 해낼 수 있다는 그런 마음을 가지셔야 될 거라고 생각합니다. 이럴려고 글을 썼나 자괴감 들고 괴로워..
문단 양끝 정렬
우리의 그 핵심 목표는, '올해 달성해야 될 것은 이것이다.' 하는 것으로 정신을 차리고 나아가면 우리의 그 어떤 에너지를 분산시키고 해낼 수 있다는 그런 마음을 가지셔야 될 거라고 생각합니다. 이럴려고 글을 썼나 자괴감 들고 괴로워..
감이 오는가? 개드립 글쓰기의 기본값은 왼쪽정렬이다. 긴 글을 이어서 쓸때 오른쪽 끝부분이 들쭉날쭉 해지는 것을 볼 수 있다. 그러나 양끝 정렬을 하면 글자사이의 간격을 html이 자동으로 조정해서 글자의 양쪽 간격을 똑같이 맞춰준다. 이는 문단이 잘 정돈되어 보이도록 시각적인 깔끔함을 선사한다.
양끝 정렬의 코드는 다음과 같다.
<div style="max-width:600px; margin:0 auto; line-height:28px; padding:10px;">
<!-- 여백에 맞춰 들어갈 내용 시작 -->
<div style="text-align:justify;">
<!-- 양끝 정렬 할 내용 시작 -->
쓰고 싶은 글을 여기에 적으세요.
<!-- 양끝 정렬 할 내용 끝 -->
</div>
<!-- 여백에 맞춰 들어갈 내용 끝 -->
</div>
사용법은 1번에 기술했던 내용과 같고, 자세한 원리는 생략한다.
만약 왼쪽 정렬로 돌리고 싶다면 위의 예제와 같은 <div> 마크업을 붙여 justify부분을 left로 수정하면 된다.
PS.
중수 이상의 사용자들이 보기에는 왜 굳이 마크업을 깊게 파서 시멘틱하지 못한 구조를 만들고 있는가?? 하는 의문이 들 수도 있다. 왜냐하면 이글이 완전초보들을 배려한 예제 위주의 설명글이기 때문이다. 양끝 정렬은 글의 내용에 따라서 보기가 흉할 수도 있고 특히 숫자와 영문 위주로 글을 작성할 경우 그렇다. 그렇기에 초심자들이 문단별로 왼쪽 정렬과 양끝 정렬을 오가며 글을 쓰고 싶을 때를 위해서 디비젼을 한번 더 나눠 놓은 것.
3. 이미지 사이즈 수정하기
이제 글은 보기좋게 써서 넣을 수 있게 되었으니 이미지의 크기도 정복을 해보자. 보기좋은 크기로 들어간 이미지는 글과 잘 어울리게 되어 훨씬 깔끔하다. 아울러 모바일에서 이미지가 잘려보인다거나 데스크탑에서 이미지가 너무 작게 보이는 문제점도 이를 통해서 일부 해결이 가능하다.
먼저 편집기를 통해서 이미지를 첨부해보자. 아무런 수정을 하지 않았다면 이미지는 원본의 사이즈 그대로 올라간다.
작은 이미지
큰 이미지
(큰 이미지가 모바일에서는 정상적으로 표시될 것이다. 이는 모바일 이미지 잘림 방지가 적용되고 있는 것)
어떠한가? 매우 보기가 불편해진다. 이 이미지를 글자와 같이 크기를 맞춰볼 수는 없을까?? 개드립에 이미지를 올릴려면 그림판이나 포토샵으로 이미지 크기를 잘라야 할까??
아니다. 이는 이미지 태그를 수정함으로써 작은 이미지든 큰 이미지든, 원하는 크기로 표시 해 줄 수 있고, 그 방법은 매우 간단하다.
1. 이미지를 평소와 같이 삽입한 뒤,
2. HTML편집기를 통해 해당 이미지 태그를 찾아낸다.
3. <img src="파일명.jpg" width="xxx" height="xxx"/>의 태그를 찾아,
4. width="xxx" height="xxx"라는 글자를 삭제하고,
5. 그 위치에 다음의 내용을 넣는다. style="width:100%;"
맞춰진 이미지
<img src="파일명.jpg" style="width:100%;"/>
어떠한가? 사진의 크기는 1920x1200이지만 글 문단의 양끝에 딱 맞는 사이즈를 가지고 삽입이 되었다. 큰 사진을 원본 그대로 넣어도 보기에 문제가 없는 것이다. 작은 사진도 위와 같은 방법으로 삽입하면 확대가 되어 보여진다. 그러나 사진이 너무 작다면 화질이 보기 좋지 않을 것이므로 잘 판단하자. 참고로 모바일에서도 잘 작동하는 코딩이다.
마치며,
웹디자인은 이미 우리의 일상생활과 뗄 수 없을만큼 깊이 들어왔다. 너희들이 개드립을 가기 위해서 간단하게 텍스트 에디터로 글을 쓰며 폰트 크기를 고치고 글씨색을 수정하고 사이즈에 맞는 냥이 사진을 올리고 유튜브 영상을 퍼오는 것 전부가 일종의 웹 디자인이라고 할 수 있는 것이다.
배우기가 매우 쉬우므로 이런 간단한 글을 통해서 약간이라도 이해에 도움이 되었으면 하는 바램이다. 웹코딩은 이제 단순히 웹페이지 제작을 넘어서서 어플리케이션 제작에도 활용될 만큼 장점이 많은 프로그래밍 언어다. 더욱 관심이 생긴다면 구글링을 통해서 검색해보자. 자료는 지천으로 깔려있다.