close this form

NAME

E-MAIL

TELEPHONE

CAPTCHA CODE
captcha

SUBJECT

MESSAGE

ABOUT | NEWS & EVENT | PORTFOLIO WORDPRESS TIP
close this form

NAME

E-MAIL

TELEPHONE

CAPTCHA CODE
captcha

SUBJECT

MESSAGE

ABOUT | NEWS & EVENT | PORTFOLIO WORDPRESS TIP
close this form

RECENT

highlight

manydevices이미지 출처: http://www.instant.ly

불과 3~4년전만 해도 우리나라 사람 대부분이 윈도우를 설치하면 같이 깔리는 익스플로러가 웹브라우저의 전부라고 생각했었다. 아니, “웹 브라우저” 라는 말 자체를 쓰지 않았다. 그냥 인터넷은 익스플로러로 하는(?) 거였드랬다. 그래서 우리나라의 웹사이트 대부분이 2001년에 출시된 구형 브라우저를 기준으로 제작되었는데 IE6(인터넷 익스플로러 6)는 신기술을 적용하기도 어려울 뿐더러 파이어폭스, 사파리, 크롬, 오페라 등의 다른 웹브라우저들과 호환이 되지 않아 웹 개발자들 사이에선 오래 전부터 골치 아픈 존재였다. 헌데, 2009년 이런 국내 웹환경에 변화가 일어나기 시작했다. 애플의 아이폰이 국내에 출시되고 더불어 아이패드와 같은 타블릿까지 보급되고 맥 유저가 늘어나면서 IE가 아닌 다양한 웹브라우저를 경험하게 된다. 웹표준이 화두가 되고 다양한 환경을 맞춰주는 퍼블리셔의 역할이 강화되기 시작했다. 게다가 마이크로소프트사에서 윈도우7, 윈도우8을 내놓으면서 구버젼의 익스플로러는 점유율이 큰폭으로 줄어들었다.

Karma_preview유료테마 Karma의 홍보 이미지. (출처: http://themeforest.net)

대신 웹환경이 워낙 다양해지다보니 이제는 브라우저별 환경을 고려하여 최적화시키는 일이 강조되고 있고 워드프레스 테마를 제작할 때도 이 점은 상당히 큰 비중을 차지한다. 최근의 유료 테마들 대부분이 스마트폰, 타블릿 PC 환경 최적화에 촛점을 맞춰 개발되고 있고 관련 플러그인들도 상당히 다양해지고 있으며 워드프레스 사용자 대부분이 관련 기능을 활용한다.

wptouch

최근에는 아이패드 미니까지 출시되는 등 다양한 모바일 기기들이 등장하고 있어 웹사이트를 설계할 때 이런 환경을 고려하는 것이 무척 중요해졌다. 조그만 스마트폰에서 30인치까지 모니터 크기가 다양해지면서 어느 하나를 기준으로 정하기가 쉽지 않다. 예를 들어, 27인치 아이맥 화면을 기준으로 웹진을 구성했다고 치자. 2560 x 1440 의 화면에 보여지던 컨텐츠가 아이폰 3GS(480 x 320)에선 어떻게 보일까? 아이패드2(1024 x 768) 에선 또 어떻게 보일까? 축소된 화면에선 버튼도 제대로 누르기 어려울지 모른다. 스마트폰이 등장하기 전까지는 모니터의 최소폭인 1024을 기준으로 스크롤바를 고려해서 대략 가로 980px 안팍으로 제작하는 것이 일반적이었다면 최근엔 스마트폰 최소 화면인 480px에 두배를 곱한, 960px을 기준으로 한단다. 데스크탑 모니터는 커졌는데 왜 웹사이트는 작아지냐고 묻는다면, “당신 호주머니 안에 있는 그 놈 때문입니다!” 라고 답할 수 밖에 없는 상황이다.

2013Mobile이미지 출처: http://idgknowledgehub.com

게다가 데스크탑에서 하던 일을 스마트폰으로도 하고 있으니 웹사이트도 모바일을 나몰라라 할 수도 없는 노릇. 재미있는 것은 사람들이 스마트폰 또는 타블릿 화면에 익숙해지면서 데스크탑의 화면에서도 큼지막하게 보여지는 것을 반긴다는 점이다. 복잡하고 세세한 것 보다 단순하고 명료한 화면이 편하다고 느끼는데 아마도 모바일 환경에 익숙해지고 있기 때문이라는 생각이 든다. 특히, 아이패드 앱으로 한때 인기를 얻었던 플립보드의 영향으로 웹사이트 디자인을 플립보드와 같은 앱 스타일로 만들려는 사람들을 종종 보게 된다. 점점 웹과 앱이 뒤섞이는 양상이다.

Flipboard-1아이패드 앱으로 인기를 모았던 플립보드(http://www.flipboard.com/)

지난 몇 년을 돌아보면, 지긋지긋한 IE6의 굴레에서 벗어난 것만으로도 기뻐해야할지 모른다. 하지만, 거인 뒤에 있던 중공군이 인해전술로 덮쳐오는 형국이랄까? 하나를 막았더니 다른 놈이 다리를 물고 또 한 놈은 내 뒤통수를 치고 있다. 이 일을 어쩐다? 결국 선택의 문제로 넘어간다. 웹사이트를 계획할 때 제일 처음 해야 할 일 중에 하나, 웹사이트의 성격을 고려해 얼마나 모바일 친화적인 웹을 만들어야할지 기준을 정하는 것이다. 그 기준에 따라 웹사이트의 구조, 레이아웃, 디자인 모든 것이 달라질 테니까 말이다. 하지만 여기서 오해하지 말하야 할 것이 모바일 환경을 고려할 것인가 말것인가가 아니라 얼마만큼 방영할 것인가의 기준이란 점이다. 웹사이트 방문자 중 상당수가 스마트폰을 통해 접속할 것이고 앞으로 그 비중은 줄어들 것 같지 않다. 이런 상황에서 모바일 웹을 배제시킨다는 것은 시대착오적인 결정일 수 있기 때문이다. 컨텐츠를 전달하는 방식은 매체에 따라 그 형식을 달리 하는 것이 당연하고, 웹은 종이와는 다른 나름의 특성이 있다는 점을 잊어선 안된다.

점점 더 다양해지고 있는 웹환경에 적절히 대처하기 위해선 웹에 대한 고정관념, 타 매체와 동일 선상에서 계획하려는 낡은 생각은 버리는 것이 좋다. 지금 호주머니에 있는 작은 녀석을 꺼내 그 창 안에 무엇이 있는지 유심히 보자. 크게 만든다고 많은 사람이 볼 수 있는 것이 아니다. 오히려 작게 만드는 것이 많은 사람과 연결될 수 있는 방법일 수 있다.

Related Posts

  • 디바이스 및 브라우저 환경을 알려주는 플러그인, PHP Browser Detection 디바이스 및 브라우저 환경을 알려주는 플러그인, PHP Browser Detection 크로스브라우징을 고려해 템플릿 개발할 때, PHP Browser Detection이라는 플러그인은 큰 도움이 된다. <?php if ( is_firefox($version) ) { do stuff }; […]
  • 한반도의 워드프레스한반도의 워드프레스 한반도에선 구글보다 네이버고 블로그 형식보단 게시판을 선호하고 페이스북과 싸이월드가 같다고 생각하는 사람이 많다(아니, 페이스북이 싸이월드를 베꼈다고 생각한다). 결제를 하기 위해선 각종 Active-X 를 깔아야 하고 그러기 […]
  • 브라우저를 아이폰 크기로, resizeMyBrowser브라우저를 아이폰 크기로, resizeMyBrowser 아이폰 3G와 3GS는 320x480, 구글 넥서스 원은 480x800, 아이폰 4와 4S는 640x960, 아이패드는 768x1024... 웹을 보는 창(브라우저)은 점점 더 다양해지고 있다. 이렇게 다양한 환경 속에서 […]
%d 블로거가 이것을 좋아합니다: