지식 누리/블로그/인터넷

티스토리 모바일웹 스킨을 만들어 봅시다

nuon 2011. 3. 22. 07:00
반응형
티스토리 모바일 웹스킨 적용하기

지난 3월 8일, 오랜만에 티스토리에서 새로운 기능의 업데이트 소식이 들려왔습니다.

티스토리는 사용자의 취향과 목적에 따라 직접 스킨을 꾸미고 코드도 수정할 수 있습니다. 이러한 높은 자유도가 여타의 서비스형 블로그들과 차별되는 티스토리만의 장점이라고 할 수 있을 텐데, 모바일웹의 경우에는 기본으로 제공되는 획일적인 스킨으로만 보여지기 때문에 많이 아쉬웠었습니다.

하지만 이번 업데이트로 드디어 모바일웹의 스킨도 사용자가 직접 수정할 수 있게  되었습니다.



티스토리 모바일 웹스킨 적용하기

그래서 이번 글에서는 누온누리의 모바일웹 스킨을 한 번 꾸며 보도록 하겠습니다.

티스토리 블로그의 관리센터를 열면 새롭게 모바일웹 스킨 기능이 오픈되었음을 알리는 팝업이 떠 있네요.


 
티스토리 모바일 웹스킨 적용하기

상단 메뉴에서 [스킨]-[모바일웹 스킨]을 선택합니다.


 
티스토리 모바일 웹스킨 적용하기

이제 모바일웹 스킨을 설정할 수 있는 페이지가 열렸습니다.

먼저 화면 상단의 스킨 탭이 눈에 띄는데, 여기서는 티스토리가 미리 만들어 제공하는 모바일웹 스킨 프리셋을 선택할 수 있습니다.


 
티스토리 모바일 웹스킨 적용하기

사진에 보이는 것처럼 3월 22일 현재 16개의 스킨 프리셋 중에서 선택할 수 있으며, 제공되는 프리셋의 종류는 지속적으로 업데이트되면 늘어날 것으로 보입니다.

스킨 프리셋에서 마음에 드는 스타일을 찾지 못했다면, 오른쪽의 세부 설정에서 직접 모바일웹 스킨을 구성해 봅시다.



티스토리 모바일 웹스킨 적용하기
먼저 블로그의 모바일 페이지에서 보이고 싶은 메뉴를 선택합니다.

최대 4개까지 선택할 수 있습니다. 메뉴1은 기본값으로 글목록이 선택되어 있어서 변경할 수 없고, 나머지 메뉴는 댓글, 트랙백, 방명록, 프로필, 갤러리, 포스트 설정, 공지 중에서 선택할 수 있습니다.

그리고 모바일웹 페이지에 접속했을 때 보여 줄 첫화면도 설정할 수 있습니다.
티스토리 모바일 웹스킨 적용하기
글목록 화면의 유형을 정할 수 있습니다.
현재는 6가지 레이아웃을 제공하고 있는데 블로그의 성격에 따라 텍스트 위주로 할지, 이미지 위주로 할지, 아니면 텍스트와 이미지를 조화시킬지 고려해서 선택합니다.

저는 6 번째 레이아웃을 선택하겠습니다.
티스토리 모바일 웹스킨 적용하기
모바일웹 페이지의 타이틀 부분도 꾸밀 수 있습니다. 직접 타이틀 이미지를 만들어 올릴 수도 있고 색상을 선택할 수도 있습니다.

직접 이미지를 만들 때에는 가로는 가급적 480px 이상, 세로는 최대 250px 이하로 하는 것이 좋습니다.

텍스트 옵션에서는 블로그 타이틀 표시 여부와 색상을 선택하는데, 저는 이미지 파일로 대체할 것이기 때문에 텍스트 사용 안 함'에 체크했습니다.
티스토리 모바일 웹스킨 적용하기
마지막으로 메뉴바와 강조색을 선택합니다.
메뉴바는 말 그대로 상단 메뉴바의 색상을, 강조색은 댓글수와 페이지숫자를 강조할 때 사용할 색상을 선택해 주면 됩니다.



티스토리 모바일 웹스킨 적용하기

설정을 마치고 왼쪽의 미리보기를 보면 지금까지 제가 작업한 스킨의 모습을 볼 수 있습니다.
지금까지 만든 스킨이 마음에 든다면 페이지 아래쪽 [적용하기] 버튼을 눌러 주세요.



티스토리 모바일 웹스킨 적용하기

[적용하기] 버튼을 누르면 위와 같은 팝업이 뜹니다.
단순히 모바일웹에 스킨을 적용하려면 [확인] 버튼만 누르면 되고,
설정한 스킨을 따로 보관함에 저장해서 다음에 다시 편리하게 적용할 수 있게 하려면 '보관함에 저장'에 체크하고 [확인] 버튼을 누릅니다.



티스토리 모바일 웹스킨 적용하기

'보관함에 저장'에 체크하고 적용했다면, 보관함 탭에서 언제든지 내가 만든 모바일웹 스킨을 다시 불러올 수 있습니다.



티스토리 모바일 웹스킨 적용하기
티스토리 모바일 웹스킨 적용하기

위의 과정을 거쳐 만들어 본 누온누리 블로그의 모바일웹 스킨입니다.
처음 만들어 본 거 치곤 그래도 나름 깔끔하지요?! ㅎㅎ

여러분도 간단한 몇 가지 설정으로 나만의 멋진 모바일웹 스킨을 만들어 보세요^^



반응형