[🚀반응형 디자인 시 7가지 체크리스트] 반응형 디자인이란, 웹 환경에서 다양한 디바이스에 최적화된 상태를 뜻합니다. 한 가지 디바이스와 해상도만 고려하는 것이 아니기에 고려해야 할 사항들이 여

[🚀반응형 디자인 시 7가지 체크리스트] 반응형 디자인이란, 웹 환경에서 다양한 디바이스에 최적화된 상태를 뜻합니다. 한 가지 디바이스와 해상도만 고려하는 것이 아니기에 고려해야 할 사항들이 여럿 존재하는데요! 1.현재 웹 사이트 확인 이건 이미 웹사이트가 구축 되었다는 가정에서 시작되는 체크리스트 중 하나입니다. 구글에서 제공해주는 최적화 테스트 등을 활용해 현재 웹사이트가 반응형으로 구축 되었는지, 모바일 환경에서도 잘 작동하는지를 먼저 확인해봐야 합니다. 2.반응형이 아닌 요소들 확인 및 수정 1번 테스트를 통해 반응형에 필요한 요소들이 무엇인지, 우리에게 부족한 점은 무엇인지 확인 할 수 있습니다. 예를 들어 네비게이션 바, 이미지, 폰트, 버튼 등이 반응형에 따라 잘 확인 될 수 있는지 등을 확인해봐야 하는 것! 3.디바이스 별 속도 테스트 1번에서 나온 얘기와 이어지는 내용인데요! 반응형이란 다양한 디바이스를 지원해야 하기에, 디바이스 별 속도에 많은 신경을 써야 합니다. 모바일로 접속했는데 PC에 비해 속도가 느리다면 사용자들에게 좋지 않은 경험을 제공해줄 수 있기 때문! 4.’Finger taps’ 고려 노트북, 데스크탑에서의 접속 환경과 모바일에서의 사용 환경은 다를 수 밖에 없습니다. 모바일에서는 특히 손가락을 활용한 이동, 전환 등이 많이 발생하는데요. 때문에 반응형 구축 시 탭핑 환경에 대한 고민이 반드시 이어져야 합니다. 5.탐색 환경 고려 모바일은 PC에 비해 환경적 제약이 많습니다. 특히 탐색 관점에서는 더 그렇죠. 메인 메뉴에 해당하는 내용들을 GNB 등에 펼쳐 낼 수 있는 PC에 비해 모바일에서는 좁은 영역으로 인해 동일한 구성이 어렵습니다. 이 때 햄버거 메뉴 사용 등 모바일 환경에 맞는 별도의 기획 요소들을 함께 고려 할 수 있어야 합니다. 6.팝업 팝업은 여전히 사용자들에게 특정 소식을 알리는 중요한 연결고리로 활용되고 있습니다. PC에서는 잘 보이는 팝업이 모바일에서는 일부 잘려 보인다면? 마찬가지로 좋지 않은 영향을 끼칠 수 밖에 없습니다. 이 경우 웹이나 모바일 버전에 따라 팝업 사이즈를 별도로 고려하는 등의 장치가 필요합니다. 7.시각적으로 어색한 점은 없는지 확인 메뉴가 잘리지는 않는지, 테이블이 해상도에 따라 잘 정돈 되어 있는지, 썸네일 사이즈가 해상도 별 설정 되어 있는지 등 해상도나 접근하는 디바이스 종류에 따라 웹사이트를 구성하는 요소들이 시각적으로 잘 정리되어 있는지 확인해야 합니다. (👋중요한 이유가 뭔가요?) 웹 서비스 구축 시, 반응형이 필수는 아니에요. 모바일 대표 해상도와 웹 대표 해상도만 가지고 각각 작업 할 수도 있고, 카카오 메이커스와 같이 태블릿 사이즈를 기준으로 웹 환경에서도 활용할 수 있도록 작업 하는 것도 가능하죠. 반응형은 웹사이트를 구축하는 하나의 방법 중 하나라고 생각합니다. 중요한 건, 누가 사용하는지 제공하는 기능이 무엇인지 이 두 가지라고 생각해요. 예를 들어 지금 써보러 갑니다의 경우 최초 예상과 다르게 데스크탑으로 접속하는 비율이 80% 이상 되는데요. 해당 데이터를 바탕으로 웹 버전을 제가 고려한다고 하면 반응형을 선택하지 않을 가능성이 높습니다. 빠르게 만들고 테스트 한다! 라는 관점에서는 더더욱 말이죠. 데이터를 포함한 여러 상황을 고려 했을 때, 반응형으로 구축해야겠다는 판단이 섰다면 위와 같은 내용을 꼭 확인해봐야 합니다. 최소, 최대 해상도를 설정하는 것으로 시작해 해상도의 변화에 따라 레이아웃이 어떻게 변경되는지 등이 기획 단계에서 충분히 고려되어야 하기 때문이죠. 반응형 구축시 조금이나마 도움이 될 수 있는 자료라는 생각에 공유합니다. (본문에는 활용 가능한 툴들도 함께 포함되어 있어요!) (💌함께 읽어보세요!) 반응형 그리드 레이아웃을 확인할 수 있는 오픈소스 라이브러리 ‘Muuri’ : http://bit.ly/2w20kbq 웹사이트의 모바일 최적화 정도와 속도를 빠르게 테스트 하는 방법! : http://icunow.co.kr/testmysite/