오랜만에 개인 홈페이지 레이아웃을 만들었다

일단 완성샷부터 보시고...

  zb4 시절엔 야매로 간단하게 레이아웃을 만들 수 있어서 금방 뚝딱 만들곤 했다. 그래서 리뉴얼도 자주 했는데 xe로 넘어오고 나니까 웹표준을 신경써야 했다. 그래서 만드는 방식이 완전히 달라졌다. 위지윅 에디터를 위주로 했던 방식에서 텍스트 에디터와 머릿속 지식과 검색 신공(...)을 이용하는 방식으로 바뀌었다. 그래서 그냥 때려치우고 무료 레이아웃으로 버텼다. 그러다가 어젯밤 외커 디교방을 보다가 금손분들에 자극을 받아서 레이아웃을 새로 짜기로 했다.  그래서  원래 레이아웃을 새로 짜고 있긴 했었는데 하다가 망해서 새로 시작하기로 했다. 우선 포토샵에 대략적인 컨셉샷을 만들어 보았다. 컨셉은 초심플과 미니멀리즘. 이미지 없이 순수하게 텍스트와 스타일로만 하기로 했다. 그렇게 이것저것 정해놓고 테스트 페이지와 코드를 번갈아 보면서 수정했다. 요소 검사 기능이 아주 유용했다.

  일단은 색보다 사이트의 전체적인 짜임새를 먼저 수정했다. 메뉴는 2단으로 해서 마우스를 갖다 대면 메뉴 주위에 박스가 만들어지고 색이 바뀌게 해 놓았다. 그렇게 코드를 막 수정하다 보니까 막히는 부분이 한두 가지가 아니었다. 난 전문적인 웹디자이너가 아니라서 그렇다. 오랜만에 코드를 만져 보는 거라서 수정하기 힘들어 네이버와 xe 공홈 검색을 이용했다. 클리어픽스를 적용하는 거나 로그인폼과 검색폼의 위치를 수정하는 게 좀 힘들었다. 그렇게 레이아웃을 짜다가 생각이 나면 그때그때 로그인 위젯도 수정했다.

  그런데 레이아웃보다 로그인 위젯이 수정하기가 더 힘들었다. 왜냐하면 막히는 부분이 엄청났기 때문이다. 난 위처럼 닉네임, 레벨, 포인트, 회원 정보 버튼, 관리자 버튼, 로그아웃 버튼을 다 넣고 싶었다. 그런데 닉네임, 로그아웃을 넣기는 쉬웠는데 관리자 버튼을 넣는 것부터 막히기 시작했다. 분명 코드는 맞는 것 같은데 출력되지 않았다. 그 코드는 관리자 버튼이 ul 안에 가 있었다. 한번 span을 이용해 빼보기로 했다. 뜬다. 이제는 레벨과 포인트 출력이 문제. 난 유령 회원이 아닌데도(;;;) 계속 값이 0이었다. 검색을 하고 소스를 찾아봤다. 그렇게 찾다가 xe 공홈에서 어떤 분의 팁을 보게 되었고 한번 내 코드와 비교해 보기로 했다. 한 부분이 좀 달랐다. 회원 정보를 잘못 불러오고 있었던 것이다. 그래서 얼른 수정했더니 0에서 정상 값으로 잘 출력되었다. 회원 정보 버튼도 검색을 동원해서 달았다. 그런데 뭔가가 이상했다. 검색창이 작동하지 않았다. 소스를 살펴보니 내가 잘못 쓴 게 있었다. form 전체를 다 빼왔어야 했는데 검색어창과 버튼만 빼오는 어이없는 실수를 저질렀다. 그래서 다시 달았더니 정상 작동.

  그렇게 레이아웃과 로그인폼을 다 수정했더니 내가 보기에 매우 좋았다. 뭐 나름 뿌듯했다. 오늘은 시간을 나름 의미있게 낭비한 것 같다. 조만간 게시판 스킨도 만들 것이다.