반응형 디자인 도입하기 #1. 주장 입증하기

Seo·2020년 9월 1일
0

목록 보기
6/8

들어가면서

왜 반응형 디자인을 도입해야 되는 건지 다양한 인터뷰와 논거를 통해 설명하고 있는 책이다.

저자는 반응형 디자인 도입에 있어서 기획, 디자인, 설계, 개발까지 이루어 지는 일련의 과정에서 모든 이해관계자들이 봐야만 한다고 한다.

읽어나가며 이해할 수 있었으면 좋겠다.

목차

  1. 주장 입증하기
  2. 계획 세우기
  3. 사이트 속도 높이기
  4. 콘텐츠 정리하기
  5. 협업하기
  6. 테스트와 평가

1. 주장 입증하기

아마 전에도 이런 얘기를 들어봤을 것이다. 반응형 디자인은 고민 없이 도입해도 된다.
- 세라 톰슨, <세븐스 제네레이션>

반응형 디자인에 찬성하는 쪽과 반대하는 쪽, 양측의 의견을 다 살펴보도록 하겠다.

1.1 왜 반응형 디자인인가?

보편적으로 모바일이 중요하다는 사실은 인식하고 있다고 가정해보자.

자 그러면 이제 '왜 반응형 디자인인가?'에 답할 차례다.

1.1.1 기기 다양성이 폭발적으로 증가하고 있다.

모바일 기기 유형, 브라우저, 스크린 크기의 유형이 폭발적으로 늘어나면서 복잡성 또한 증대했다.

반응형 디자인은 '모바일용 디자인'이 아니다. 하지만 '데스크톱 디자인'도 아니다. 기기 종류와 상관없이 쓸 수 있는 더욱 유연한 방식으로 웹을 디자인하는 것이 반응형 디자인이다.
- 이단 마콧, <반응형 웹디자인>

오늘날 많은 웹사이트 트래픽의 50%는 스마트폰과 태블릿으로 유입된다.

그러나, 데스크톱 사용이 줄지 않았다는 사실이 다소 놀랍다.

1.1.2 기기별 맞춤형 설계는 생각보다 어렵다.

"반응형 디자인 프로젝트를 하는 동안 가장 많이 쓰는 단어는 무엇일까요?"
"답은 모바일, 테블릿, 데스크톱입니다."
"그러나 이 3개 단어는 디자인 프로세스에서 가장 도움이 되지 않는 단어입니다."
- 이단 마콧, 워크숍에서 질문

기기 스스로 "나는 테블릿이야!"라고 인터넷에 떠벌리는 일은 없다.

기기 유형에 대해 알아낼 수 있는 정보조차도 신뢰도가 몹시 낮다.

  • 화면의 물리적 크기가 반드시 기기 유형을 알려주지는 않는다.
    (예를 들면, 스마트폰 화면을 가로로 돌려놓고 본다면...)
  • 화소 밀도도 기기마다 다르다.
    (해상도 등, 재미있는 사실은 iOS 아이콘이 초장기 메킨토시 컴퓨터 전체 화면보다 크다는 것이다.)
  • 입력 방식으로도 기기 유형을 구분할 수 있을 것만 같을 것이다.
    마찬가지로 입력 방식도 정확히 알아내기는 어렵다.
  • 접속 속도 또한 기기의 유형이나 기능에 대해 제대로 알려주지 않는다.
  • 사용자 에이전트(User Agent:UA) 식별도 기기 유형을 알아내는 합리적 방법인 것 같다.
    마찬가지로 UA문자열로 구별할 수 없는 특성이 있기 때문에 사용자 에이전트 식별도 온전히 신뢰할 수 없다.
  • WURFL이나 넷비스킷 같은 기기 식별 라이브러리는 기기 유형과 기능을 구별해준다.
    하지만 비용을 내야 하며, 유료 라이브러리에 기대는 것은 그리 좋지 못하다.

위와 같은 이유로 기기별 맞춤형 설계는 불가능하지는 않더라도 꽤 어렵다.

좋은 소식은 사실 브라우저 창 크기 한 가지만 알면 된다는 것이다.

반응형 디자인은 이러한 정보를 바탕으로 브라우저 창 크기에 잘 맞추어 부드럽게 웹사이트를 렌더링한다.

반응형 디자인의 의사결정 및 설계 프로세스는 기기 유형에 대한 취약하고 부정확한 가정에 의존하지 않고 사이트가 모든 화면 크기에서 문제없이 작동하게 하는 데 집중된다.

1.1.3 사용자는 모든 기기에서 똑같은 정보를 원한다.

소비자가 모바일 브랜드 경험에 점수를 매길 때 가장 중시하는 기준은 단연호 '원하는 방식으로' 콘텐츠에 접근할 수 있는가였다.
실제로 소비자의 91%는 자신의 원하는 방식으로 콘텐츠에 접근할 수 있는가를 중요하게 본다고 답했으며,
83%는 모든 기기에서 매끄럽게 이어지는 경험 또한 중요하다고 했다.
그리고 스마트폰이나 태블릿 혹은 둘 다 가진 소비자를 기준으로 보면 이 수치는 더욱 높아진다.
-세일즈포스 마케팅 클라우드, 연구자료

구글은 모바일 접속 77%가 길거리가 아닌 집이나 직장에서 이루어진다고 발표했다.

자신에게 가장 가까운 위치에 있는 기기를 집어 들었다는 이유만으로 다른 검색 결과나 정보를 원한다고 생각할 이유가 있을까?

그러면 기업의 형태에 따라 달라질 수도 있는가?

1.1.3.1 대기업

우리가 수집한 데이터는 모바일 기기와 데스크톱에서 사용자의 행동이 별반 다르지 않다는 것을 분명하고 또렷하게 보여준다.
이들이 찾는 대상이나 수행하는 작업은 사실 거의 똑같다.
- 크리스 발트, MS 시니어 웹 제품 관리자

1.1.3.2 출판업

과거에 우리는 큰 차이가 있다고 걱정했다. 하지만 솔직히 차이가 정말 있는지도 모르겠다.
사람은 그대로인데 시간대에 따라 쓰는 기기가 바뀔 뿐이다.
- 잭 수어드, 퀴츠의 제품 담당 부사장이자 편집국장

1.1.3.3 금융업

사람들이 복잡한 금융 거래에 스마트폰을 포함한 온갖 기기를 쓴다는 놀라운 사실을 깨달았다.
- 스티븐 투르베크, 피델리티의 사용자 경험 디자인 부문 상무

1.1.3.4 소매업

다른 기기를 쓰는 사용자라고 해서 근본적으로 다른 요구 사항이 있다거나 다른 경험을 원한다고 생각하지 않는다.
우리가 훨씬 더 중요하게 생각하는 부분은 누가 특정 유형의 페이지를 어떤 목표를 가지고 보느냐 하는 것이다.
우리는 '그 사용자가 접속한 기기가 모바일인가? 데스크톱인가?'를 우선적으로 고려하지는 않느다.
- 모니카 피로트로비츠, 쇼피파이(Shopify)의 프론트엔드 개발팀장

1.1.3.5 인트라넷

사람들이 어느 시점에 무엇을 필요로 할지는 알 도리가 없다.
직원들에게 이런 사실을 이해시키기 위해 갑자기 아내가 아파서 병원으로 달려갔던 한 관리자의 유스케이스를 들려주었다.
그에게는 긴박하게 보험 관련 정보가 필요했지만 사무실에 있는 네트워크에 접속하지 않는 한 그 정보를 얻을 수 없었다.
_- 마이크 도너휴, 시트릭스(Citrix)의 사용자 경험 아키텍트

1.1.3.6 관광업

에스노그라피 연구와 실험 연구를 진행하고 사이트의 메커니즘을 분석적 관점에서 관찰한 결과
사람들은 상황과 상관없이 똑같은 결정을 내린다는 것을 알아냈다.
- 스콧 켈턴 존스, 익스피디아의 사용자 경험 디자인 담당 부사장

1.1.4 하나의 웹사이트를 유지보수하는 편이 더 쉽다.

(너무나 당연한 말...)

자원이 충분한 일은 많지 않다.
그래서 우리는 있는 자원을 최대한 효율적으로 활용할 방법을 고민한다.
내가 다닌 모든 직장이 마찬가지였다.
"투자 대비 가장 큰 이익을 낼 최고의 방법이 무엇일까?
반응형 웹 프레임워크는 기기 변화에 훨씬 더 빠르게 반응하고 모든 플랫폼에 콘텐츠를 확실히 업데이트할 수 있게 해주었다.
관리 비용이 줄어도 외형적 일관성은 잘 유지된다는 점이 논쟁에서 가장 큰 설득력을 발휘했다.
- 티나 알렉산더, 타임닷컴(Time.com)의 제품개발 부분 이사출신

1.1.5 하나의 웹

"웹은 유일하다"

하나의 웹은 사용자가 어떤 기기를 사용하든 합리적인 범위 내에서 똑같은 정보와 서비스를 접할 수 있게 한다는 뜻이다.
그렇다고 모든 기기에서 완전히 똑같은 정보를 정확히 동일한 형식으로 접할 수 있게 한다는 뜻은 아니다.
- W3C의 모바일 모범 사례 권고안

하나의 웹에는 철학전 관점 뿐 아니라 실용적 관점에서도 가치가 있다.
고객은 다양한 접점이 제공하는 경험에서 일관성을 느끼고 싶어 한다.
왜 우리는 기기마다 다른 경험을 제공하기 위해 노력하는 것일까?
바로 여기에서 하나의 웹이 지니는 철학적 가치가 드러난다.
또한 하나의 웹은 체계, 프로세스, 팀이 통합되어야 할 필요성을 강화함으로써 비용을 절감하고 디지털 사업의 효율성을 증대시킨다.
이런 점이 하나의 웹이 지니는 실용적 가치다.
- 포레스터 보고서, <반응형 웹디자인의 가치는 그렇게 단순하게 분석할 수 없다>

1.1.6 구글도 반응형 디자인을 추천한다.

"모바일겟돈"
구글이 친 모바일 알고리즘으로 개편을 하면서 모바일에 대응하지 못한 사이트들은 처참하게 떨어지고,
모바일을 미리 대응했던 사이트들은 살아남았다.

반응형 디자인은 구글이 추천하는 모바일 사이트 제작 방식이다. 크롤링과 색인 생성도 하나의 웹사이트를 대상으로 한 번만 하면 되기 때문에 구글의 작업도 더 간편해진다.

1.1.7 반응형 디자인이 더 높은 사업적 가치를 지닌다.

애버딘그룹이 진행한 연구는 반응형 디자인을 적용한 기업들이 브랜드 인지도, 구매전환율, 회사 연간 수익 등의 연례 실적 핵심 지표에서 훨씬 더 좋은 성과를 거두었음을 보여준다.

1.2 반응형 디자인의 대안

물론 반응형 디자인이 모바일에 접근할 수 있는 유일한 방법은 아니다.

  • 앱 : 네이티브 앱(iOS, Android...)
  • m.사이트 : 서브 도메인에 별도 웹사이트 구현
  • 적응형 솔루션 : 기기나 맥락 등 정해둔 기준에 따라 다른 콘텐츠나 코드 제공하기

1.2.1 앱

저자는 모바일 사이트와 네이티브 앱 중 무엇을 만들어야 할지 고민한다면 반응형 디자인 사이트를 만들어야 한다고 말한다.

그러나 모바일 사용자의 하루 평균 모바일 기기 사용 시간 중 브라우저에서 보내는 시간은
불과 14% 정도라는 플러리의 2014년 연구 결과를 많이 인용하며 '모바일 사용자는 대부분의 시간을 앱을 쓰며 보낸다!'라고 반증할지 모른다.

조금 더 공평하게 볼 방법은 무엇일까?

  • 모건 스탠리 보고서에 따르면 모바일 웹의 트래픽은 앱의 2배이고 1.2배 빠른 속도로 성장하고 있다.
  • 사용자는 고작 다섯 개 앱에서 80%의 시간을 보낸다.
    포레스터의 데이터에 따르면 페이스북, 유투브 구글 지도, 판도라, 지메일이 아닌 이상 앱 열풍에 편승해서 이득을 볼 가능성은 없다.
  • 모바일 앱 사용과 관련한 연구는 앱 브라우저 내에서의 웹 사용량에 대해 간과했다.

네이티브 앱이 모바일 전략에서 중요한 존재가 아니라는 말이 아니다.

사실 성공한 기업은 웹과 앱이 경쟁 관계가 아니라 보완 관계라고 본다.

네이티브 앱에 투자할 생각이 있든 없든 웹사이트는 필요하다.

앱이 있든 없든 모바일에서 잘 작동하는 웹사이트가 있어야 한다.
그리고 그 사이트는 전체 내용을 완벽히 보여주어야 한다.
구글, 페이스북 링크는 사람들을 그 사이트로 데려올 것이기 때문이다.
앱과 웹사이트 둘 다 있거나 웹사이트만 있는 경우 모두 고객들이 모바일로만 찾아올 것이라고 가정해야 한다.
앱은 선택 사항이고 웹은 그렇지 않다
- 베네딕트 에번스, 앤드리슨 호로비츠

절대 둘 중 하나를 골라야 하는 것이 아니다.

웹사이트는 기본이다.

1.2.2 m.사이트

m.domain.com 이라는 서브 도메인으로 제공하는 사이트들이 많기 때문에 m.사이트라고 부른다.

다시 말해 데스크톱 웹 사이트와 모바일 사이트 2개를 별도로 운영한다는 뜻이다.

반응형 웹 사이트와 비교해 어떤 장단점이 있는가?

1.2.2.1 성능

사이트 속도는 개발자가 모바일에서 m.사이트를 선호하는 첫 번째 이유다.

모바일 환경에 맞게 HTML, CSS, 자바스크립트를 별도로 관리하기 때문에 페이지 용량이 데스크톱 사이트 페이지 용량보다 더 적을 수 있다는 것이다.

그러나 페이지 용량은 반응형 사이트와 m.사이트의 성능을 비교할 때 고려해야 할 하나의 요소에 불과하다.

  • m.사이트는 사용자가 연결 지연을 느낄 수 있다.
    m.사이트에 접속하면 보통 처음에 리디렉션을 한다.(domain.com -> m.domain.com)

오십보백보
- 더그 실러스(AT&T 모바일 앱 최적화 수석 아키텍트), 상위권 모바일 사이트 1000개에서 추출한 데이터를 분석 후

좋은 코드, 훌륭한 의사결정이 결합되면 다른 어떤 방법에도 뒤지지 않을 만큼 신속한 반응형 사이트를 지원할 수 있다.

1.2.2.2 동등한 경험 제공

m.사이트의 성능이 좋은 이유는 단지 '보다 적은' 경험을 제공하는 데 있다고 본다.

데스크톱 사이트보다 훨씬 적은 정보만 제공하기 때문에 사용자의 96%가 m.사이트를 쓰지 않는다는 사실을 발견했다.
- 캐피털윈의 한 연구결과

1.2.2.3 서버 측 기기 식별

사용자가 어떤 유형의 기기나 브라우저를 쓰는지 클라이언트 측에서 정확하게 알아내는 것이 불가능하지는 않지만 꽤 어렵다는 사실이다.

무엇보다 그에 맞는 유료 라이브러리에 의존할 때 감당해야 할 부담 그 이상의 위험이 도사리고 있다.

그리고 대응할 준비가 안 된 신제품들이 시장에 계속 등장할 확률은 100%이다.

클라이언트 측에서 완벽히 가변적으로 대응할 준비를 해둔다면 새로운 기기와 화면 크기가 등잘할 때마다 설계를 수정하지 않더라도 웹사이트가 정상적으로 작동할 것이다.

1.2.2.4 링크 공유

여러 도메인을 동시에 관리할 때 겪는 또 다른 문제는 링크 공유가 어려워진다는 점이다.
(데스트톱 브라우저에서 m.사이트를 열었을 때 엉망진창 같은 레이아웃이란)

1.2.2.5 조직 정치

이러한 여러가지 이유가 있음에도 m.사이트가 항상 논쟁거리로 등장하는가?

그 답은 조직 구조에 있다.

기업은 분쟁을 최소화하기 위해 모바일 팀과 데스크톱 팀을 분리하고 각 팀에 자유롭게 활동할 수 있는 고유 영역을 배정한다.

모바일 팀은 독립적이었으며 m.사이트를 관리하는 리더나 생산팀도 분리되어 있다. 모바일에서는 심지어 MTV 로고도 달랐다.
- 라이언 새퍼, MTV 디자인 및 사용자 경험 부사장

경험을 통해 배우자.
(...중략...)
요즘은 모바일이 사업에 정말 중요한 부분이기 때문에 모바일 사용자 경험을 엉망으로 만들어서는 안 된다.
내가 할 수 잇는 조언은 모바일 사이트를 위해 별도의 웹 앱을 만들지 말라는 것이다.
반응형 웹사이트를 만들자.
- 데이브 오거스틴, 에어비앤비의 엔지니어링 관리자

1.2.3 적응형 솔루션

일단 적응형 솔루션은 반응형 디자인이 아니다.

특정 조건에 맞는, adaptive 경우에 맞춰서 제공하는 솔루션이다.

적응형 디자인은

  • 기기에 따라
  • 혹은 그 밖의 기준에 따라

사용자에게 다른 콘텐츠, 다른 디자인 등 무언가 다른 것을 제공한다.

반응형 디자인은

  • 유동형 그리드(fluid grid)
  • 유동형 이미지(fluid image)
  • 미디어 쿼리(media query)

로 명확하고 일관성 있게 정의할 수 있다.

이제 사람들이 적응형이라고 말할 때 가장 흔하게 쓰이는 3가지

  • 적응형 그리드
  • 적응형 디자인
  • 적응형 콘텐츠

를 살펴보도록 하자.

1.2.3.1 적응형 그리드(Adpative Grid)

적응형 디자인에서는 보통 하나의 코드 베이스에 여러 해상도에 맞는 일력의 고정폭 정적 레이아웃을 만들어둔다.
반응형 디자인은 유동형 그리드를 쓰고 적응형 디자인은 기기 크기에 '맞추어' 자리를 잡는다.

기기 유형에 맞는 레이아웃을 만드는데 집중할 수 있다는 점이 장점이자 단점이다.
기기 화면 크기는 매우 다양하기 때문에 미리 만들어둔 크기에 완벽하게 맞지 않는 기기가 대부분이다.

반응형 디자인 솔루션이 클라이언트 측에 있고 적응형 솔루션이 서버 측 협상을 필요로 한다는 것을 알아두면 좋다.
(구글은 종종 '동적 게재(dynamic serving)'라고 부른다)

반응형 디자인과 서버 측 컴포넌트를 합쳐 RESS라는 용어를 만들었는데 이 말은 적응형의 다른 이름으로 간주될 수 있다.
(Responsive Design, Server Side Components)

일반적으로 클라이언트 측은 반응형, 서버 측은 적응형이라고 볼 수 있다.
(적응형 그리드는 온전히 클라이언트 측이라는 것을 잊지 말자)

1.2.3.2 적응형 디자인(Adaptive Design)

반응형 디자인은 같은 프론트엔드 코드가 모든 기기로 전송된다.
코드 베이스가 하나면 일관된 유지보수가 더 용이하다.

하지만 때로는 그 때문에 레이아웃이나 프레젠테이션 측면에서 희생이 필요할 때도 있다.

적응형 디자인은 특정 기기 유형이나 화면 크기에서 별도의 m.사이트를 지원하지 않고도 인터페이스의 특정 측면을 최적화하는 방법이다.
같은 URL에 다른 HTML을 전달하도록 길을 열어둠으로써 m.사이트에서 발생하는 일부 문제를 피할 수 있다.

  • 다른 페이지 전달
    홈페이지나 광고용 모바일 랜딩 페이지, 혹은 복합적인 폼처럼 적응형 디자인 솔루션을 적용하기 적합한 페이지나 템플릿이 있다.
    CSS-Tricks의 설립자이자 작가인 크리스 코이어 조차 CodePen을 개발할 때 하이브리드 솔루션(반응형 + 적응형)을 선택했다고 한다.
  • 페이지 일부부만 다르게 전달
    기기의 크기가 바뀌면 테이블이나 미디어 플레이어 같은 페이지 일부부만 문제를 일으킬 수 있다.
    적응형 디자인을 특정 기능에만 적용하면 기기 유형이 달라질 때 기능을 그에 맞게 변형해서 보낼 수 있다.

반응형 디자인으로도 충분히 해결할 수 있는 문제인데 여러 버전의 디자인을 유지해야 할 이유가 있을까?
그렇다면 서버는 언제 관여해야 할까? 다른 콘텐츠를 전달하려 할 때다.

1.2.3.3 적응형 콘텐츠

기업은 보통 대상에 따라 맞춤형 콘텐츠를 제공하고자 적응형 콘텐츠를 찾는 경우가 많다.
다른 콘텐츠를 제공하기 위해 적용하는 세 가지 주요 변수는 다음과 같다.

  • 기기 유형
    스마트폰, 태블릿, 데스크톱, 텔레비전, 스마트 워치...등등
    적응형 콘텐츠는 모바일 전용 광고 랜딩 페이지나 기기별 맞춤형 SEO 키워드도 지원한다.
  • 맥락
    사용자가 무엇을 하는지 알려주지 않는다. 그러나 사용자 맥락에 관해 가정을 세울 수는 있다.
    현재 몇 시인지를 기준으로 사용자가 집에 있는지, 직장에 있는지를 추정해서 타깃 사용자에게 맞는 콘텐츠를 보낼 수 있다.
  • 개인화
    과거 구매 이력에 따라 각 고객에게 서로 다른 마케팅 메시지를 제공한다는 것이 그나마 덜 암울한 미래상의 예일 것이다.

1.2.3.4 반응형과 함께 쓰기

적응형과 반응형은 반의어가 아니다. 이 둘은 서로 보완해주는 관계다.

적응형 솔루션을 써보기로 정했다고 하더라도 일단 반응형으로 시작하는 것이 좋다.

반응형은 설계 관점은 물론 엔지니어링 관점에서도 게임에 참여하는 데 필요한 판돈에 불과하다.
기본값이라는 말이다.
나중에 특정 모바일 시나리오에 따라 최적화한 맞춤형 경험을 만들기로 결정하게 될 수도 있지만
꼭 그 작업을 맨 처음에 할 필요는 없다.
반응형으로 시작해도 된다.
- 빌 W.스콧, 페이팔의 넥스트 젠 커머스 부사장

반응형 디자인은 모든 기기에서 똑같은 정보와 기능에 접근할 수 있게 해준다는 장점 덕분에 고객의 요구에 잘 부응한다.
그리고 회사나 팀의 필요 또한 충족시킨다.
웹사이트를 더 효율적으로 관리하고 유지보수할 수 있기 때문에 투자 대비 소득이 커진다.

profile
개발관심자

0개의 댓글