by
Jul 11. 2020
기획자라면 알고 있어야 할 '웹사이트 유형'
반응형 웹 vs 모바일 웹 vsPC 웹
(아래 글은 글쓴이가 기획업무를 하면서 배우고 경험했던 것들을 바탕으로 '웹사이트 유형'에 대하여 기술하였습니다)
과연 우리는 네이버나 카카오 없이 일주일을 살 수 있을까?
아마 대부분의 사람들이 '아니오'라고 대답을 할 것이다.
간혹 '살 수 있는데!?'라는 사람이 있을 수 있지만 그 사람은 그 일주일이 아주 고달플 것이라고 감히 예상한다.
내가 이렇게 말을 한 이유는 우리는 어느 순간부터 너무나도 자연스럽게 아침에 일어나면 네이버나 다음, 구글 등에 접속해 날씨를 확인하거나 밤 사이에 일어난 뉴스 기사를 보고, 쌓여있는 카카오톡을 확인하는 게 일상이 되었다.
이러한 모든 것들이 일상이 되는 동안 우리가 사용하고 있는 웹사이트, App 등이 어떻게 만들어지고 무슨 차이가 있는지에 대해서 궁금해하는 사람은 거의 없을 것이다.
나 또한 IT인이 되기 전까지는 이러한 것들에 대해 전혀 궁금해하지 않았으나, 실제 현업에서 기획을 하다 보니 각각의 장/단점을 알게 되었고 내가 이용하는 사이트는 어떤 환경으로 되었는지 파악하는 것에 관심을 갖게 되었다.
따라서, 이번에는 일반적으로 사용하는 PC웹과 모바일 웹, 반응형 웹에 대해서 알아보려고 한다.
앱에 대해서 궁금한 사람들은 다음으로 작성할 게시글(네이티브 앱 vs 하이브리드 앱)을 참고하면 될 것 같다.
PC 웹이란?
PC웹은 단어 그대로 'PC환경으로 접속했을 때 가장 호환이 잘되는 웹사이트'라고 생각하면 될 것 같다.
컴퓨터를 이용하여 특정 사이트에 접속하면 모니터에 꽉 찬 형태로 사이트가 구현되는데 이것만 봐서는 해당 사이트가 일반적인 PC 웹인지? 반응형 웹인지? 적응형 웹인지? 알기는 힘들다.
가장 좋은 방법은 핸드폰에서 해당 url을 쳐서 들어갔을 때 예쁘게 나오면 반응형 웹이고 PC에서 보는 화면과 동일하게 나와 너무 작게 보인다고 PC 웹이라고 생각하면 편할 것 같다.
Q) 그렇다면 PC 웹의 장/단점은 어떤 게 있을까?
장점
① 반응형 웹에 비해 짧은 시간내에 구축할 수 있다.
② PC환경에 더 최적화된 UI 구현과 기능을 사용할 수 있다.
단점
① 모바일로 접속 시 호환이 어렵다.
Q) 대표적인 사이트는?
- 네이버(www.naver.com)
- 소상공인시장진흥공단(www.semas.or.kr)
PC웹에 대해서 설명하기보다는 아래 있는 반응형 웹과 모바일 웹의 정의와 장/단점, 예시 사이트를 확인하고 나면 구분이 더 쉬울 것이다.
반응형 웹이란?
일반적으로 반응형 웹을 설명할 때 '한 가지의 웹사이트로 다양한 종류의 기기에 최적화된 화면을 보여줄 수 있는 웹사이트'라고 한다.
조금 더 쉽게 설명하면 사용자가 컴퓨터로 접속을 하든 핸드폰으로 접속을 하든 접속하려는 기기의 화면과 해상도에 맞는 형태로 사이트를 보여준다고 생각하면 된다.
반응형 웹을 만들려면 기획을 할 때부터 지원 가능한 디바이스와 해상도 범위를 정하고 각 환경에 맞는 UI/UX를 고려하여 기획을 진행해야 한다.
나는 보통 반응형 웹을 만들 때는 PC/Tablet(가로)/Tablet(세로)/Mobile 총 4가지 기준에 맞춰서 기획을 진행했었다.
Q) 그렇다면 반응형 웹의 장/단점은 어떤 게 있을까?
장점
① 운영체제와 상관없이 그 환경에 맞는 화면을 보여준다.
② 업데이트, 유지보수, 디버깅 등이 상대적으로 쉽다.
③ 같은 도메인을 사용할 수 있다.
④ 따로 개발하는 것보다 구축비용이 감소한다.
단점
① 디자인(기능)이 화려해질수록 구현이 힘들다.
② 브라우저 버전과 호환성에 따라 달라질 수 있다.
Q) 대표적인 사이트는?
- 기상청(www.weather.go.kr)
- 삼성전자(www.samsung.com)
반응협 웹을 말할 때 항상 함께 나오는 단어로 '적응형 웹'이라는 것도 있다.
적응형 웹에 대해서는 추후 반응형 웹과 적응형 웹의 차이점, 설계할 때 고려해야 할 점에 대해서 얘기할 때 같이 다루려고 한다.
모바일 웹이란?
모바일 웹은 '데스크톱 PC용 웹사이트와 별개로 모바일 브라우저에서 이용자들이 편하게 사용할 수 있도록 모바일 화면 크기에 맞도록 구현한 웹사이트'라고 할 수 있다.
예를 들어 설명을 하면 우리가 아주 많이 사용하고 있는 네이버나 다음과 같은 포털 사이트를 PC에서 접속하면 www.naver.com로 접속되고, 모바일에서 접속하면 m.naver.com로 접속되는 것을 볼 수 있다.
이처럼 이미 PC용 웹사이트가 있지만 Mobile에 더 최적화된 사이트를 제공하고 싶은 경우에 별도로 만들어서 운영을 하며 이를 모바일 웹이라고 부른다.
Q) 그렇다면 모바일 웹의 장/단점은 어떤 게 있을까?
장점
① 모바일에 더 최적화된 UI를 구현할 수 있다.
② App에 비해 구현 난이도가 낮다.
단점
① PC 웹사이트와 다른 도메인을 사용해야 한다.
② 업데이트를 할 때 PC와 Mobile을 각각 진행해야 한다.
③ 실행 속도가 느리다.
Q) 대표적인 사이트는?
- 네이버(m.naver.com)
- 환경부(m.me.go.kr)
- 롯데몰(m.lotteimall.com)
모바일 웹에 대해서는 다음 글인 '네이티브 앱 vs 하이브리드 앱'에서도 다시 한번 다룰 예정이다.
※ 기획업무와 기획자 관련되어 컨설팅이 필요하신 분들은 아래 링크를 참고해주세요.
https://brunch.co.kr/@dreamit/33
※ 기획업무를 하면서 궁금하신 사항은 아래 카카오 오픈채팅방에 들어오셔서 물어보시면 됩니다.
https://open.kakao.com/o/g4uIw5Kc
※ 각종 기획문서(화면설계서, 메뉴구조도 등)와 취업/이직문서(경력기술서, 포트폴리오 등)는 네이버 블로그나 티스토리를 통해 다운로드 받으실 수 있습니다^_^
https://m.blog.naver.com/dreamiter
https://dreamiter.tistory.com/
