RUKXER.net

뭐....이런 이유들 때문입니다 -ㅂ- ㅋ


그러면, 어떻게 하느냐? 장황하게 서두를 시작했지만, 기본 아이디어는 간단합니다.

눈에 띄는 이미지를 블로그 내에 넣고, 모바일 주소를 링크시킨다.

이게 전부 입니다 :-)
문제는 어떤 위치에 어떤 이미지로 어떻게 링크를 지정할 것이냐? 하는 것입니다.

'어떻게 링크' 라는 의미는, 단순히 모바일 유저들이 메인 도메인만 타고 들어오는 게 아니라는 것입니다.
간단히 예를 들면, 제 블로그의 가장 인기 포스팅인 http://rukxer.net/2460179 로 직접 링크를 타고 들어 온 모바일 유저라고 가정해 보겠습니다.
이 유저가 모바일 페이지로 전환했을 때 해당 포스팅에 대한 모바일 페이지 http://rukxer.net/m/2460179 를 보여 줘야 하겠죠? 그리고 그 모바일 유저도 그걸 원할 것입니다. 쌩뚱맞게 메인 페이지 http://rukxer.net/m 이 아니고 말이죠.

이를 위해 저는 링크 주소로 다음의 주소를 활용합니다.


샵샵은 ##이라고 그대로 갖다 쓰면 곧바로 치환자로 인식되어 포스팅 본문에서 안 보여서리;;

어쨌든.. 이 주소를 기본 아이디어에 그대로 적용해서 예제로 만들어 보면 다음과 같이 되겠죠?


쟌~ 이렇게 해서 기본 준비는 되었습니다. 원하시는 이미지는 알아서....... -ㅂ-;; ㄷㄷㄷㄷ

어쨌든 html과 태그를 이해하고 있다면, 어려운 개념은 아닙니다. 기초적인 태그만 응용하는 것이거든요. 제가 아는 한계이기도 하고;; ㅋㅋㅋ


다음 단계는 어떤 위치에 놓느냐, 하는 것입니다. 여기서는 조금 제약이 따르는데요~ 바로 앞에서 주소로 활용한 [샵샵_article_rep_link_샵샵] 치환자 때문입니다.
이 치환자가 먹히는 영역이 따로 존재하기 때문에 위치를 고민해야 합니다.


그림으로 보면 위 그림과 같이 오로지 본문영역만 해당되고, 스킨 html, css 관점에서 보면 content 속성 내에서만 사용할 수 있습니다... 아닐 지도 모르지만, 개인적으로는 그렇게 느껴지네요.

각자의 스킨 디자인과 버튼 디자인에 맞춰 해당 영역 안에서 배치는 하면 되는데, 되도록이면 드림위버 등의 툴을 이용하시는 게 편리하실 겁니다. 저는 이번에 그냥 텍스트 에디트를 해봤는데........ ㅡ,.ㅡ 드림위버 안 쓴 걸 후회했습니다. ㅋㅋㅋㅋ

여튼;; 코드를 말로 설명하긴 어렵고, 한 번 제가 사용한 코드를 그대로 올려 보겠습니다.
아, 제 스킨에서는 제목 영역에 같이 배열했기 때문에 titleContainer라는 사적인 속성을 추가했습니다.


그리고 관련 CSS는 다음과 같습니다.




뭐.......이런 정도로 마무리 해보겠습니다 :-)

저는 웹프로그래밍에서는 아마추어 초보자라서 정확하지 않은 코드가 있을 수도 있습니다. 새삼 양해 부탁드릴게요^^ ㅋㅋ;;;;;;;;



이렇게 적용한 버튼을 제 아이팟 터치에서 한 번 들여다 봤습니다.


버튼을 크게 만들었다고 생각했는데도 모바일 환경에선 가독성이 확 띄진 않는 것 같네요. 다만, 아이폰의 아이콘 모양으로 디자인한 건 그나마 좀 나은 선택이었는 듯...



가로로 보면 비로소 mobile 이라는 문구가 보이기 시작합니다.




모바일 유저를 위한 환경을 조성하면서 동시에 일반 PC 유저들에게 거슬리지 않게 만든다는 것이 쉽지만은 않다는 게 이 작은 버튼 하나 만들면서 느껴지네요.
그러나 모바일 환경을 사용하는 유저가 많아지면서 블로그의 기본 페이지 못지 않게 모바일 페이지도 중요성이 높아지는 건 분명한 사실입니다.
일단은 이렇게 버튼이라도 달아서 접근성을 높이지만, 앞으로는 그 모바일 페이지에 맞게 컨텐츠도 만들어야 할 지도 모른다는 압박 또한 생기네요 ㅠㅂㅠ;


여튼, 혹시나 필요하신 분들에게 도움이나 참고가 될까~ 하는 마음으로 포스팅 올립니다.

긴 글 읽어 주셔서 감사합니다^^