모바일 스킨을 만들어보자. (1) - 기본적인 구성부터 완성까지.

  어제는 몸이 영 좋지 않아 그냥 포스트 업로드를 포기했습니다. 요즘들어 부쩍 자주 몸이 아픈게 몸이 허한가봐요.^^; 보약댁에 레이니아 놔드려야 할 상태입니다. 그래서 토요일날인 오늘 이 포스트를 올리고 다시 주말 동안 푹 쉬어주려고 합니다. 역시 몸이 제일이니까요. 덕분에 이웃방문 및 다른 활동도 제한이 되겠지만 양해 부탁드리겠습니다 ㅠ_ㅠ

포스트 시작할께요!

---

레이니아입니다.
 이미 시간이 조금 지났지만, 최근에 티스토리에서 주목할만한(!) 업데이트를 선보였습니다. 그것은 바로 모바일 페이지를 구현할 수 있는 업데이트였습니다. 기존의 모바일 화면은 티스토리에서 가지고 있는 다양한 스킨과는 달리 모바일 화면은 하나로 통일되어 있었는데요.

 이번에 업데이트로 지난번에 비해서 비교적 다양한 스킨을 골라서 만들 수가 있게 되었습니다.

(달라진 스킨입니다.)

 저도 급한대로 기존에 사용하고 있던 그림을 수정하여 급조(!?)했는데요. 이번에 새롭게 제작을 하려고 마음을 먹으면서 한번 정리를 해보려고 마음먹고 작업을 조금 진행해보았습니다.

 우선 모바일 웹 스킨을 수정하기 위해서는 어디로 가야하는지는 다들 알고 계시지요? 블로그 관리자 화면에서 스킨-모바일웹 스킨으로 가시면 됩니다.

(모바일웹 스킨으로 가시면 됩니다.)

(다음과 같은 화면이 펼쳐집니다.)

 그러면, 이제부터 어떻게 스킨을 만드는지 단계를 밟아보도록 하겠습니다.

 우선 스킨을 선택해야합니다. 모바일 웹의 특성 및 기타 다양한 이유로 현재는 모바일 웹에서 자신이 설정할 수 있는 부분이 웹처럼 자유롭지는 않습니다. 더 제한이 풀릴 수도 있겠지만, 지금당장은 이정도로도 충분하다는 생각이 드네요.

 아무튼, 모바일웹도 기본이 될만한 스킨을 선택해야 합니다. 기본이 될만한 스킨의 기준은 자신의 블로그와 비교적 비슷한 분위기의 스킨을 찾는 것이 중요한 것이겠지요. 여기서 특히 중요하게 보셔야 할 것은 상단 메뉴가 선택된 후 색깔입니다.

 실제로 웹과 모바일 환경에서 100% 동일한 분위기를 내기는 힘든 것이 사실입니다. 그러나 블로그에서 가장 강력한 인상을 주는 부분중의 하나는 타이틀 이미지이고, 아래 설명하겠지만 이 부분은 수정이 가능합니다. 그렇다면 그 다음 영향을 미치는 것을 찾아봐야 할텐데요. 그것이 상단 메뉴의 선택 색입니다.

(이 부분을 의미합니다.)

 이 부분의 경우에는 어떤 수를 쓰더라도 색 변경이 불가능^[각주:1]합니다. 개인적으로 이 부분도 충분히 설정이 가능하리라 생각했는데 되지 않아서 무척 당혹스러운데요. 점차 나아지리라는 기대를 해 보면서 우선은 저희에게 주어진 여건을 최대한 활용하는 수 밖에 없겠지요. 아무튼 이 선택색이 자신의 블로그와 어울리는 지를 먼저 찾아보아야 하겠습니다.

 미리보기에 주어져 있으므로 확인해보세요.

  모바일 화면에 등장하는 상단 메뉴를 설정할 수 있습니다. 저는 제가 블로그를 확인할 때 자주 사용하는 메뉴를 3개 올렸습니다. 참고로 첫번째 글 목록은 디폴트 값으로 설정되어 있어 다른 선택을 할 수가 없습니다.

 두번째 메뉴부터는 선택할 수 있는데요. 선택 가능한 메뉴는 댓글, 트랙백, 방명록, 프로필, 갤러리, 포스트 설정, 공지, 메뉴 선택(비워둠)이 있습니다. 자신이 원하는 메뉴를 담을 수가 있습니다. 대부분 아실만한 메뉴입니다만, 조금 독특한 메뉴만 설명을 할께요.

 포스트 설정은 특정 포스트를 삽입하는 경우입니다. 실제 블로그에서 상단메뉴에 특정 포스트 링크를 연결해놓는 경우가 있습니다. 단적인 예로 제 블로그의 Copyrights메뉴가 그러한데요. 이 부분을 저는 포스트를 링크시켜 놓았습니다. (그러니 확인 좀 하시고 함부로 퍼가지 마세요. 먹고살기 팍팍한데 그런 것 까지 신경쓰려니 요즘 제가 팍팍 늙고 있습니다.ㅠ_ㅠ)

 포스트 설정메뉴를 선택하시면 다음과 같은 화면이 뜹니다.

(다음과 같은 화면)

 여기서 포스트를 직접 선택하면 됩니다. 상단 좌측에 하이라이트 쳐져있는 박스에 ‘저작권’이라고 적혀있지요. 이 부분은 수정이 가능합니다.(기본값은 포스트) 4글자만 가능하기 때문에, 잘 생각하셔서 선택하셔야 합니다. 설명에도 나와있지만 잘못 연결 한 경우, 다시 포스트 설정을 선택하여 다시 연결할 수가 있습니다. 개인적으로 조금 불편하다 싶네요.

 메뉴 선택은 말 그대로 해당 메뉴를 비워둘 수 있습니다. 지금 상단의 제 블로그 스크린샷을 보시면 3단 메뉴로 구성되어 있지요. 4번 째 메뉴는 메뉴 선택으로 돌려서 비워둔 것입니다. 첫번째는 디폴트 값이기 때문에 나머지를 전무 메뉴 선택으로 돌려버리면 상단 메뉴가 사라져버리네요. 참조하세요.

(메뉴가 사라지지만 그다지 유용하진 않은 것 같습니다.)

 다음으로 첫화면을 설정할 수 있습니다. 메뉴 1~4까지의 메뉴중에서 블로그에 접속했을 때 가장 처음으로 보여줄 화면을 뜻하죠. 글 목록을 노출시키는게 낫겠다 싶어서 저는 첫화면으로 글목록을 선택중입니다.

(첫화면이 글목록으로 되어있습니다.)

  글목록 메뉴에서 글이 어떻게 노출되는지 설정할 수 있는 메뉴입니다. 각각을 클릭해보시면 친절하게 미리보기가 나오네요.

(다양한 글목록 유형이 있습니다.)

(아이콘으로 보는 글목록 유형)

 각자 취향에 맞게 고르시면 되겠습니다. 전 좌측 상단 기준, 시계방향으로 2번째 것을 선택하고 있습니다.

  타이틀을 설정할 수 있는 메뉴입니다.

(타이틀 메뉴)

 타이틀은 우선 단색과 파일을 올리는 두가지의 방법을 사용할 수 있습니다. 저 같은 경우엔 직접 올리는 것을 택했습니다. (상단 이미지가 분명히 존재하니까요.) 단순하게 가시려면 색상을 넣으시는 것도 좋습니다.

 높이 부분은 상단 바의 높이를 의미합니다. 파일을 올리는 경우엔 파일 크기에 맞춰주는 것이 가장 좋으며, 색상일 경우엔 직접 설정해보시고 그 비율을 찾는게 좋을 것 같습니다.

 다음으로 텍스트입니다. 텍스트는 상단 바에 직접 글씨가 들어가는 것을 제어할 수 있습니다. 그러나 직접 글씨를 입력하는 것이 아닌 블로그의 제목이 자동으로 들어갑니다. 이 점을 염두에 두셔야 할 것 같습니다. 텍스트 색 역시 선택이 가능합니다.

 스스로 만든 블로그의 타이틀이 있다면 이를 업로드하는 것이 가장 효율적인 방법일 것입니다. 그러나 이런 것이 여의치 않다면 깔끔한 배경을 집어넣고 텍스트를 사용하는 배경+텍스트 방식과, 색상과 텍스트를 사용하여 정말 단순하게 구성할 수 있는 색상+텍스트 방식을 선택할 수 있겠네요.

(썰렁해보이네요)

 가장 하단에 위치한 메뉴바와 강조색은 각각 메뉴가 선택되지 않았을 때의 색과, 댓글표시부의 색을 조절합니다. 메뉴바가 선택된 색상은 스킨에 기본으로 붙어있어 설정이 불가능하다고 했지요? 따라서 메뉴바의 색은 이 색과 크게 차이나지 않는 색, 혹은 아예 보색을 선택하는 것이 바람직합니다. 탭이라는 것을 명확히 드러낼 수 있는 것이 디자인적으로 괜찮을 것 같습니다.

  적용버튼을 누르면 보관할 것인지를 물어봅니다.

(적용을 눌렀을 때입니다.)

 기본적인 이름은 시간으로 설정되어있습니다만, 수정이 가능합니다. 보관함에 저장해 놓은 스킨은 바로바로 꺼내어 볼 수가 있는데요.

(보관함입니다.)

 이것저것 만져보시다가 하나로 확정이 되셨다면 바로바로 보관함에 저장하는 것이 바람직하다는 생각이 듭니다.

---

 잠깐 정리를 하려고 했더니 어느새 분량이 상당해졌네요. 아무래도 파트를 나누어야 할 것 같습니다. 전체적인 설명은 이것으로 충분하리라 생각이 듭니다.(또한, 미리보기가 잘 되어있어서 이것저것 만져보면 금세 익히실 수 있으실거에요.) 오히려 제 설명이 다분히 부차적인 설명이었으리라 싶습니다.

 다음 포스트에서는 상단바 타이틀에 대해서 조금 더 생각해보아야 할 점에 대해서 적어보도록 하겠습니다.
지금까지 레이니아였습니다.:)

1. 덧붙여, 왠지 버그가 아닐까 하는 생각도 해 봅니다. [본문으로]