[신입 UIUX디자이너 일기] 반응형 디자인할 때 주의사항

사진: Unsplash 의 Marek Levák

 

얼마전 개발자님으로부터  반응형 웹페이지를 디자인할 때 '태블릿'과 '모바일'을 유사하게 디자인해달라는 요청을 받았다. 기존에는 디자이너 사수와 알려준대로 웹과 태블릿의 결을 더 맞추려고 했는데 (여기에서 결을 맞춘다는 건 폰트 사이즈나, 버튼 존재의 유무 , 레이아웃 등) 개발자님의 이야기는 또 달랐다. 더 설득력있었고.

---

1. 태블릿과 모바일 터치방식을 고려해 최대한 유사하게 디자인하기

웹과 태블릿/모바일 사용에서는 기기의 터치 방식에 차이가 있다. 웹은 마우스라는 도구를 이용해 원하는 경로로 이동하지만 태블릿과 모바일은 손으로 바로 스크린을 터치하기 때문에 터치 방식의 차이에서 발생하는 미묘한 차이가 발생한다. 이 점을 고려한다면 정말 태블릿과 모바일을 디자인 요소를 유사하게 가는 게 맞겠구나 싶었다.

 

2. 컴포넌트들 순서가 엉키지 않게 배치하기 

웹에서 "이미지 + 텍스트 + 카드모듈"이 있었으면 태블릿과 모바일에서도 "이미지 + 텍스트 + 카드모듈"로 가야한다는 이야기였다. 물론 이렇게 단순한 경우에는 말하지 않아도 디자이너도 알아서 배치하지만, 내용이 많을 경우 디자이너 입장에서 '그대로 배치하면 첫화면에 이미지만 보일 텐데, 순서를 바꿔볼까....?"라는 식의 생각을 하다가 웹과 순서가 많이 달리지는 경우도 종종 발생하기 때문이다. 정말 특별한 경우가 아니라면 보편적으로는 이 순서를 유지하는 게 퍼블리싱 단계에서 복잡해지지 않는다는 이야기를 들었다.