일반적인 웹디자인에서 PC, MOBILE, TABLET 반응형을 구축할 때, 영문 워드프레스 홈페이지 제작 과정은 한 가지 문제에 직면하게 됩니다. 그건 텍스트 사이즈 조절인데요.

모바일 랜딩에서 큰 변화는 확인할 수 없으며, 좌 우 여백은 15PX로 테블릿 20PX 보다는 작게 유지 하였습니다.

이번 디자인에서 역시 의뢰인께서 전달한 텍스트를 모두 포함한 상태에서 가독성 있는 구조를 만들려면 기기별 텍스트 크기에 신경을 많이 써야 했습니다. 현재 웹사이트 디자인이나 퍼블리싱을 하고 있는 분들이나 공부 중이라면 이 부분에 대해서도 약간의 경험이 필요할 것입니다.

이번 디자인에서 버튼 텍스트 요청이 너무 길어서 부득이하게 PC와 달리 가로 배치가 아닌 상하로 디자인된 사례가 이 문제를 잘 설명해 주고 있다 생각되네요.

모바일 반응형은 사실 거의 대부분 세로 배치가 무난합니다. 하지만 그렇다고 디자인 자체를 완전히 무시한 구조는 모바일 환경에서 스크롤이 너무 길어지게 합니다.

이번 역시 3개 칼럼으로 구분된 디자인은 세로 배치로 구조를 변경 하였고, 대신 아이콘과 텍스트는 좌우 배열을 유지 하였습니다.

실제로 워드프레스 반응형 구축에서 이러한 구조 구분은 꼭 필요한 디자인 요소이기 때문에 참고 하시면 좋을 것 같습니다. 결국 잘 배치된 디자인 구조란 상황에 따라 다르며, 이 역시 개발자나 디자이너의 경험에 의해 결과물이 좌우 될 수 밖에 없습니다.