Skip to content

웹액츄얼리 사이트 '반응형 웹디자인'으로 개편

웹액츄얼리팀은 지난해 7월부터 흥미로운 웹기술을 연구해 왔는데요. 바로 ‘반응형 웹디자인(Responsive Web Design)’입니다. 테블릿PC를 비롯한 다양한 모바일 기기에서 각각의 해상도에 맞는 UI로 레이아웃을 변형하여 보여줌으로써 사용자에게 최상의 모바일 경험을 제공하는 기술을 말합니다. 미국의 이단 마콧(Ethan Marcotte)이라는 웹개발자가 처음으로 고안한 CSS3 관련 기술(new mindset)입니다.

여기에 워드프레스 기반으로 반응형 웹디자인을 적용했기 때문에 디바이스 마다 각각 콘텐츠를 만들지 않아도 됩니다. 한번의 콘텐츠 업데이트로 모든 디바이스에 최적화된 콘텐츠를 볼 수 있습니다. 이렇듯 이 기술을 사용하게 되면 브랜드의 아이덴터티의 일관성을 통해 웹과 모바일의 비즈니스 전략을 효율적으로 가져갈 수 있습니다. 아직까지는 계속 혁신중인 영역이라 완성도가 높은 것은 아닙니다. 애플 iOS나 구글 안드로이드 환경의 모바일 애플리케이션에 비해 부족한 면도 많습니다. 하지만 글로벌 웹디자인계에 있는 수많은 웹디자이너와 웹개발자들이 다양한 기능 개선팁들을 쏟아내고 있습니다.

웹액츄얼리팀은 우리의 웹사이트를 먼저 실험해보았습니다. 워드프레스 기반에 반응형 웹디자인 기술을 적용해서 제작했습니다. ‘베타’버젼이라 여기저기 부족한 부분도 많이 있습니다. 지금 웹사이트, 테블릿PC, 스마트폰에서 웹액츄얼리 사이트에 들어가 보세요. 디바이스에 따라 달라지는 UI/UX를 경험해 보실 수 있습니다. 컴퓨터 앞에 앉아 계신다면 지금 웹브라우저 창을 마우스로 줄여보세요. 브라우저의 크기에 맞춰서 알맞게 변하는 레이아웃을 확인할 수 있습니다.

2008년때 만들었던 웹액츄얼리 브랜드페이지(https://webactually.com)는 워드프레스 테마 중 가장 대표하는 일반적인 형태의 폼이었습니다. 많은 분들이 사랑해 주셨고 정이 많이 들었던 사이트였습니다. 이번에 웹액츄얼리 브랜드페이지를 ‘워드프레스 반응형 웹디자인’으로 개편한 이유는 여러가지가 있습니다.

 

반응형 웹디자인으로 적용한 이유

 

모바일 시장의 빠른 성장

전문 리서치 회사들이 예상한 것보다 훨씬 빠른 속도로 모바일 시장이 커지고 있고, 사용자들도 빠르게 스마트폰 사용 환경에 익숙해져 가고 있습니다.

스마트폰 사용자의 빠른 적응력

사용자들은 언제 어디서나 모바일로 빠르게 원하는 정보를 찾고, 글을 읽고 피드백을 주고 또는 받고 싶어 합니다. 이왕이면 다홍치마라고 기왕이면 모바일 환경에 최적화된 UI에서 정보를 보고싶어하는 사용자들이 점점 늘어가고 있습니다.

모바일 앱에서 모바일 웹으로

스마트폰 시장의 초창기에는 모바일앱이 유행하여 앞다투어 앱을 만들던 시기도 있었습니다. 하지만 점점 다양한 모바일 디바이스와 사이즈의 기기들이 출시되면서 앱개발자들의 고민이 시작되었습니다.

댄장! 도대체 몇개의 앱을 만들어야 하는 거지?

 

웹액츄얼리팀에서는 6월경에 이단 마콧이 직접 저술한 반응형 웹디자인(Responsive Web Design) 도서를 번역출간할 예정입니다. 모바일을 우선으로 생각하는 요즘 시대에 반응형 웹디자인은 합리적인 제작 비용과 유지보수 편이성을 제공할 뿐만 아니라 사용자에게는 편리한 UI를 통한 높은 가독성을 제공합니다.

이 책을 통해 국내 웹디자인 종사자 여러분들도 최신 글로벌 웹디자인 기술을 경험해보시기 바랍니다. 여러분들의 고객이 만족을 하실 것입니다. 그리고 바쁜 일정에도 이번 ‘웹액츄얼리 워드프레스 반응형 웹디자인 개편’ 프로젝트에 참여해준 웹액츄얼리 팀원들께 감사의 뜻을 전합니다.

반응형 웹디자인(Responsive Web Design)은 이단 마콧이라는 웹개발자가 Media Query, 가변 그리드, 이미지 등을 활용해 처음으로 고안하고 시도한 개발 방식입니다. 하나의 웹사이트가 PC, 타블렛, 모바일의 해상도 사이즈에 따라 적절하게 반응하는 레이아웃으로 새로운 기기 출현에 따른 별도 개발 이슈를 줄이고, 그래서 현재 글로벌 웹디자인계에서 가장 큰 이슈로 떠오르고 있습니다.

관련 글 도서 추천

추천도서
  • 반응형 웹디자인

반응형 웹디자인
Ethan Marcotte 저 웹액츄얼리코리아 출간
모바일 시대를 위한 웹의 새로운 접근 방식 반응형 웹 디자인 용어를 만든 이단 마콧의 솔직담백한 디자인 접근법 자세히보기

  • Prodeux 2012-05-21 16:03:00

    웹으로 들어갔다가 아이폰으로 들어와보니 확실히 느낌이 오네요.
    사이트 개편 축하드립니다. ^^

  • kimee  2012-05-21 17:38:00

    웹액츄얼리 워드프레스 반응형 웹디자인 오픈!!! 그저~ 우리 웹액츄얼리의 모든 팀원들이 자랑스럽다는 말 외에는 할말이 그다지 ^^ : 

  • Asaroon 2012-05-21 17:40:00

    리뉴얼 축하드립니다. 깔끔하네요!^^

  • skysurfr 2012-05-21 18:01:00

    아이폰 3GS로 보고 있습니다. 조금 느린거 빼면 국내의 대부분의 모바일 페이지들 보다 가독성 좋고, 스타일도 괜찮네요.

  • Young Im Kang 2012-05-21 18:29:00

    멋진 사이트에 반했어요! 웹액츄얼리팀의 역동성을 느낄 수 있는 이 곳, 쉽진 않아 보이지만, 저도 이런 사이트 만들어 보고 싶어 졌어요 ㅎㅎ

  • KimYangKeun 2012-05-21 23:59:00

    첨부한 이미지와 같이 크롬브라우저에서 에러 메시지가 뜨네요... 

  • webactually2012-05-22 10:44:00

    페이스북 버튼들을 불러오는 아이프레임에서 잠시 오류가 있었던거 같네요~ 페이지를 다시 로드해 보세요~ 오류 알려주셔서 감사합니다. ^^ 

  • 오경수 2012-05-22 01:35:00

    아이패드에서 가로, 세로만 돌려봐도 효과를 확실히 알겠습니다.
    늘 진화하는 웹액츄얼리, 화이팅입니다.

  • youp_han 2012-05-22 10:15:00

    멋진 디자인의 웹입니다. 아이폰으로도 들어가 함 봐야 겠네요. 싸이트 개편 축하드려요

  • 오경석 2012-05-24 00:42:00

    가끔 둘러보러 오는데 정말 좋네요...이런 디자인 너무 좋아요! 국내 사이트에서 이미지도 따로따로 모두 안자르고 포지션 조절하면서 사용하는 사이트는 첨봤어요! 짱! 그런데 두번째 네비게이션에서 스크롤로 메뉴 이동 하는데 이동되고 난 후에 되돌아갈수 있는 기능도 있었으면 좋겠어요! 엄청 많이 내려오면 다시 메뉴 선택하러 올라가기가 힘들어요!

  • webactually2012-05-24 01:26:00

    CSS Sprite 이미지 말씀하시는 거죠? ^^ 한 2년전 부터 사용하고 있었어요~ 스크롤 부분 기능 추가하려고 고려하고 있었습니다. 그외에도 곳곳에 부족한 부분이 많이 보이지만, 베타 정신으로 하나하나 꾸준히 고쳐 나가보려고 합니다 ^^ 지켜봐 주세요~ 

  • senv 2012-05-24 12:58:00

    축하드려요

  • laotzu 2012-06-03 03:49:00

    워드프레스 기술을 선도하는 웹액츄얼리에 성원을 보냅니다. 

  • Jh42089 2012-07-15 21:07:00

    깔끔하네요.. 어떤 테마인지 알 수 있을까요?

  • joanberics 2012-08-29 16:28:00

    테스트입니다.



맨위로