반응형 웹 구현
3개의 분기점(종단점)
어떤 디바이스에서도 페이지가 완벽하게 제대로 보이길 원했다.
특히 요즘은 모바일을 정말 많이 사용하는데 모바일에서 페이지가 보이지 않으면 아무런 의미가 없다고 생각했다.
때문에 반응형 웹을 구현하기로 했고, 분기점을 3개로 정했다.
/*
일반버전(1) - PC
style
*/
@media all and (max-width: 1024px) {
/*
일반버전(2) - PC작은창, 태블릿
style
*/
}
@media all and (max-width: 767px) {
/*
모바일버전 - 일반 스마트폰
style
*/
}모바일 페이지는 심플하고 컴팩트하게
아무리 크기를 조정해도 모바일의 작은 화면에서 네비게이션 메뉴는 답답하고 조잡하게 보였다.
작은 화면에서는 컨텐츠 공간을 최대한 확보하고 싶었다.
터치로 스크롤 하기가 어렵지는 않지만 최대한 적게 스크롤(한눈에 보이는 것) 하는 것이 사용자에게 편하다고 생각하기 때문이다.
다른 모바일 페이지를 살펴보면서 2가지 해결책을 찾았다.
canada goose 모바일 페이지와 같이 메뉴 버튼으로 여닫는 방법과 musinsa와 같이 하단에 아이콘 표시의 네이게이션 메뉴로 바뀌는 방법이었다.
musinsa와 같이 하단의 네비게이션 메뉴는 경험상 직관적이지 못했다.
당연하게 메뉴 버튼을 찾다가 하단 네비게이션 메뉴를 발견하곤 했다.
저렇게 만든 이유는 아마도 앱 때문인가 싶기도 하다.
 |  |
|---|---|
| canada goose 홈페이지 | musinsa 홈페이지 |
나는 네비게이션 메뉴를 버튼으로 여닫기로 했다.
화면이 작아지면 네비게이션 메뉴가 사라지고, 메뉴 버튼이 나타나게 설정했다.
.header__mobile-navigation {
display: none;
}
.navigation {
width: 100%;
height: 30px;
margin: 20px 0px;
background-color: #ffffff;
}
@media all and (max-width: 767px) {
.header__mobile-navigation {
display: flex;
}
.navigation {
display: none;
}
}어떤 배치가 좋을까?
오른손잡이가 왼손잡이보다 압도적으로 많다.
그 때문에 모바일 디바이스에서 중요할수록 오른쪽에 가깝게 배치해야 한다고 생각한다.
페이지에 들어오면 로고를 누를 일이 없을 것 같아 왼쪽으로, 메뉴 버튼은 자주 누르기 때문에 오른쪽에 배치했다.
갤럭시 z플립 맞춤
에뮬레이터를 이용해서 기기마다 보이는 것을 확인했다.
유일하게 갤럭시Z플립의 폭이 너무 좁아 컨텐츠가 어색하게 보였다.
때문에 갤럭시 플립만을 위한 분기점을 추가했다ㅎ...
그래도 상당한 부분이 이미 되어있어서 디테일한 부분만 설정해주면 되었다.
/*
일반버전(1) - PC
style
*/
@media all and (max-width: 1024px) {
/*
일반버전(2) - PC작은창, 태블릿
style
*/
}
@media all and (max-width: 767px) {
/*
모바일버전(1) - 일반 스마트폰
style
*/
}
@media all and (max-width: 280px) {
/*
모바일버전(2) - 갤럭시 플립
style
*/
}✅
일반 버전과 모바일 버전 각각 레이아웃을 다르게 설정하는 부분이 조금 번거로웠지만 큰 어려움은 없었다.
앞으로는 모바일 퍼스트!
이번에는 데크스탑 퍼스트로 작성했지만, 앞으로는 모바일 퍼스트로 작성하려고 한다.
큰 차이가 없을 것 같아 데크스탑 퍼스트로 했지만, 해보니 중요한 점이 있었다.
데스크탑 퍼스트로 구현하다 보니까 모바일 페이지의 레이아웃과 디자인은 자연스럽게 데스크탑을 따라갈 수 밖에 없었다.
페이지의 용도에 따라 다르겠지만 나는 모바일 페이지가 월등하게 중요하다고 생각하는데,
작업하면서 아이러니하게 느껴졌다.
모바일페이지를 시작점으로 잡았으면, 모바일 페이지의 완성도를 더 끌어올릴 수 있을 것 같다.
Repository를 보고 싶다면 GitHub을 참고하세요.
반응형 웹에 대한 정리를 보고 싶다면 Responsive Web(반응형 웹)을 참고하세요.
