정말 오래 걸렸습니다. 티스토리로 옮기게 되면서 그동안 글꼴을 맑은고딕 위주로 구성했는데 너무 글자들로만 이루어지니 글꼴 가장자리 다듬기를 적용한 윈도우 환경에서 CRT 모니터를 쓰는 저로서는 전체적으로 흐린 느낌 때문에 집중이 안 된다는 생각이 들었고 AdSense를 추가하면서 기존 블로그의 모습을 바꾸자는 결심을 하고는 11일 이후로 거의 이 일에만 매달린 것 같습니다. IE의 CSS 관련 오류 덕분에 몇몇은 해결 과정에서 바꾸다 보니 처음 의도와는 다른 모습이 되긴 했지만 현재로서는 다소 색의 일관성이 부족한 느낌이 들기도 하지만 대체로 만족할 만한 수준이 되어서 적용시켰습니다. :D
포토샵으로 내용을 배치하는 것을 스스로 깨우친 것은 아니고 일전에 같이 일하던 웹디자이너 분의 작업 모습을 어깨너머로 보고 느꼈습니다. 항상 홈페이지 만든다고 해봐야 노트에 직접 그렸으나 잘되지 않더라고요, 흰 도화지도 아니고 브라우저만 바라보고 레이아웃 잡는다는 것은 정말 어려운 일이 아닐 수가 없습니다. 처음 구상대로 구현하기도 어렵고 단시간에 끝내지 못하면 최초의 의도를 잊어버릴 수도 있기 때문에 대략적인 내용 배치에 대해서는 이렇듯 포토샵을 사용합니다. 같은 회사의 이미지 레디가 가볍고 웹 작업에 특화되긴 했는데 워낙 익숙한 게 포토샵이다 보니 웹 작업을 하시겠다면 포토샵 말고 이미지 레디를 활용해 보시는 것도 좋을 것 같습니다.
제일 처음 기준이 되는 제목 부분을 그려 놓고는 하늘색 줄을 가이드라고 하는데 처음 내용을 기준으로 가이드를 그려 넣었습니다. 나눈 기준은 웹페이지에서 DIV 태그로 나눌 부분을 잘라냈습니다. 어쨌든 웹페이지 작업을 바로 들어가는 것보다는 포토샵이던 실력이 되면 그림판에서라도 눈에 보이는 결과물을 작업해 놓는 것이 편합니다. 될 수 있으면 레이어 단위를 지원해서 옆에 그림처럼 배치를 자유롭게 바꿀 수 있는 도구가 좋을 것 같습니다. 물론 색상 변경을 고려해서 글자들은 글자대로 보존하고 가급적이면 각 개체를 독립적으로 구성해 놓는 것이 효율적인 것 같습니다.
여는 태그와 슬래시로 닫는 태그가 이용되는 HTML도 웹 페이지를 위한 언어이기 때문에 들여쓰기/내어쓰기를 잘하는 것이 나중에 고칠 때도 머리와 손이 편해집니다. 개인적으로 소스 코드를 작성할 때 들여쓰기/내어쓰기에 대단히 민감한 성격이라 코딩 작업의 20% 정도는 들여쓰기/내어쓰기에 고민하곤 합니다. 물론 이 부분은 직업이 아닌 사람의 여유로울 수 있는 특권일 수도 있습니다. :) 다만, 결과물을 유지/보수하기에는 들여쓰기/내어쓰기에 치중해 둔다면 남이 아니라 스스로가 편해질 수 있습니다. HTML 설계는 단락에 대해서는 DIV 태그를 활용하고 필요한 부분에 따라 SPAN 태그나 P 태그를 통해 잡아 나가면 됩니다. IE가 CSS를 해석하는 방법이 다소 표준에서 어긋나는 부분이 있고 일부는 오류가 있기 때문에 다른 브라우저에서 작업하고 IE를 보게 되면 그 출력 화면이 차이가 많이 납니다. 대체적으로는 고치긴 했지만 아직 그대로 두고 있는 부분도 남아 있습니다. 그건 한두개씩 눈에 띄면 처리해야겠습니다. 저처럼 자주 접하지 않는 분들은 이런 오류가 생기면 당황하실 텐데 저로서는 웹 표준을 될 수 있으면 준수하기 위해서 Firefox에서 기준 작업을 하고 IE에 필요한 Hack 등을 사용하여 우회하는 방법을 사용했습니다. 다음은 참고가 된 곳입니다. 더 필요하신 분들은 구글 등에서 CSS, Hack, ie float 등의 검색어를 입력하시면 필요한 정보가 수두룩하실 겁니다. :D (참고1, 참고2, 참고3) 그리고 HTML이나 CSS에 대해서 기본적인 개념을 이해하시려면 W3Schools도 추천해드립니다. 영문으로 되어 있지만 크게 어려운 수준이 없어서 이해하기 쉬우실 것 같습니다.
이상으로 스킨을 만들면서 제가 작업했던 과정에 대해서 적어보았습니다. 물론 직업으로 삼는 분들은 저마다 작업 시간 단축을 위한 편의 도구와 자주 활용하는 CSS/HTML 코드들을 가지고 재활용하는 등의 지식이 있으실지 모르지만 포토샵 등을 써 왔지만 저렇게 활용하지 않으셨던 저 같은 분들에게 참고가 될까 싶어 적어 보았습니다. :D
 포토샵 |  레이어 들 |
포토샵으로 내용을 배치하는 것을 스스로 깨우친 것은 아니고 일전에 같이 일하던 웹디자이너 분의 작업 모습을 어깨너머로 보고 느꼈습니다. 항상 홈페이지 만든다고 해봐야 노트에 직접 그렸으나 잘되지 않더라고요, 흰 도화지도 아니고 브라우저만 바라보고 레이아웃 잡는다는 것은 정말 어려운 일이 아닐 수가 없습니다. 처음 구상대로 구현하기도 어렵고 단시간에 끝내지 못하면 최초의 의도를 잊어버릴 수도 있기 때문에 대략적인 내용 배치에 대해서는 이렇듯 포토샵을 사용합니다. 같은 회사의 이미지 레디가 가볍고 웹 작업에 특화되긴 했는데 워낙 익숙한 게 포토샵이다 보니 웹 작업을 하시겠다면 포토샵 말고 이미지 레디를 활용해 보시는 것도 좋을 것 같습니다.
제일 처음 기준이 되는 제목 부분을 그려 놓고는 하늘색 줄을 가이드라고 하는데 처음 내용을 기준으로 가이드를 그려 넣었습니다. 나눈 기준은 웹페이지에서 DIV 태그로 나눌 부분을 잘라냈습니다. 어쨌든 웹페이지 작업을 바로 들어가는 것보다는 포토샵이던 실력이 되면 그림판에서라도 눈에 보이는 결과물을 작업해 놓는 것이 편합니다. 될 수 있으면 레이어 단위를 지원해서 옆에 그림처럼 배치를 자유롭게 바꿀 수 있는 도구가 좋을 것 같습니다. 물론 색상 변경을 고려해서 글자들은 글자대로 보존하고 가급적이면 각 개체를 독립적으로 구성해 놓는 것이 효율적인 것 같습니다.
 CSS |  XHTML |
여는 태그와 슬래시로 닫는 태그가 이용되는 HTML도 웹 페이지를 위한 언어이기 때문에 들여쓰기/내어쓰기를 잘하는 것이 나중에 고칠 때도 머리와 손이 편해집니다. 개인적으로 소스 코드를 작성할 때 들여쓰기/내어쓰기에 대단히 민감한 성격이라 코딩 작업의 20% 정도는 들여쓰기/내어쓰기에 고민하곤 합니다. 물론 이 부분은 직업이 아닌 사람의 여유로울 수 있는 특권일 수도 있습니다. :) 다만, 결과물을 유지/보수하기에는 들여쓰기/내어쓰기에 치중해 둔다면 남이 아니라 스스로가 편해질 수 있습니다. HTML 설계는 단락에 대해서는 DIV 태그를 활용하고 필요한 부분에 따라 SPAN 태그나 P 태그를 통해 잡아 나가면 됩니다. IE가 CSS를 해석하는 방법이 다소 표준에서 어긋나는 부분이 있고 일부는 오류가 있기 때문에 다른 브라우저에서 작업하고 IE를 보게 되면 그 출력 화면이 차이가 많이 납니다. 대체적으로는 고치긴 했지만 아직 그대로 두고 있는 부분도 남아 있습니다. 그건 한두개씩 눈에 띄면 처리해야겠습니다. 저처럼 자주 접하지 않는 분들은 이런 오류가 생기면 당황하실 텐데 저로서는 웹 표준을 될 수 있으면 준수하기 위해서 Firefox에서 기준 작업을 하고 IE에 필요한 Hack 등을 사용하여 우회하는 방법을 사용했습니다. 다음은 참고가 된 곳입니다. 더 필요하신 분들은 구글 등에서 CSS, Hack, ie float 등의 검색어를 입력하시면 필요한 정보가 수두룩하실 겁니다. :D (참고1, 참고2, 참고3) 그리고 HTML이나 CSS에 대해서 기본적인 개념을 이해하시려면 W3Schools도 추천해드립니다. 영문으로 되어 있지만 크게 어려운 수준이 없어서 이해하기 쉬우실 것 같습니다.
이상으로 스킨을 만들면서 제가 작업했던 과정에 대해서 적어보았습니다. 물론 직업으로 삼는 분들은 저마다 작업 시간 단축을 위한 편의 도구와 자주 활용하는 CSS/HTML 코드들을 가지고 재활용하는 등의 지식이 있으실지 모르지만 포토샵 등을 써 왔지만 저렇게 활용하지 않으셨던 저 같은 분들에게 참고가 될까 싶어 적어 보았습니다. :D
이올린에 북마크하기
이올린에 추천하기
Prev
