vue.js 토이 프로젝트 - 코드 관리 서비스 제작기 (4) 반응형 처리

 

이전 글 보기

- 전체 코드 및 소개는 1편에서 확인할 수 있습니다.

2023.12.13 - [개발 일지] - vue.js 토이 프로젝트 - 코드 관리 서비스 제작기 (1) 프로젝트 소개

2023.12.14 - [개발 일지] - vue.js 토이 프로젝트 - 코드 관리 서비스 제작기 (2) localStorage

2023.12.15 - [개발 일지] - vue.js 토이 프로젝트 - 코드 관리 서비스 제작기 (3) ui/ux

---

 

지난 편에서 ui/ux를 변경하고 적용했다.

오늘은 모바일에서도 편하게 이용할 수 있도록 반응형을 적용해보았다.

 

브라우저 크기를 줄였을 경우 깨지는 스타일

 

브라우저 크기를 모바일, 아니 태블릿 정도로만 줄여도 스타일이 처참하게 깨졌다... 😭

반응형을 고려하지 않고 제작했을 때 이런 참사가 일어남

 

근데 나는 반응형으로 뭔가 해본 경험이 거의 없기 때문에 이번이 첫 시도였다.

 

업무 볼 때 미디어 쿼리 깔짝깔짝 쓴 기억을 가지고 시도...

일단 반응형 처리를 위해서는 어떤 작업이 주로 필요한지 알아보자.

 

---

• 미디어 쿼리 활용
• flexbox 및 grid 활용
• vh 를 이용한 컨테이너 높이 설정
• em / rem 폰트 크기

---

이 외에도, 이미지나 동영상 같은 곳에 크기 처리를 준다던가하는 작업이 더 있을 수 있다.

프로젝트에서는 미디어 쿼리만 적용하면 되는 단계였기에 다행이었다.

 

---

 

미디어 쿼리 활용

 

미디어 쿼리는 다양한 화면 크기에 대응하기 위해 스타일을 조절할 수 있는 기능이다.

다음은 다양한 화면 너비에 따라 대응하는 미디어 쿼리의 예제이다.

 

웹 브라우저: 1024px

@media screen and (min-width: 1024px) {
  body {
    ...
  }
}

 

태블릿: 768px ~ 1023px

@media screen and (min-width: 768px) and (max-width: 1023px) {
  body {
    ...
  }
}

 

모바일: 767px

@media screen and (max-width: 767px) {
  body {
    ...
  }
}

---

모바일에서의 메뉴 형태 변경

 

웹과 모바일의 경우 가로 사이즈가 꽤 차이나서 목록을 보여주는 게 쉽지 않았다.

게다가 처음에 flex로 구성했을 때 목록와 코드 블록을 하나로 묶어버려서 더 어려웠던 것도 있다.

 

그래서 그냥 햄버거 메뉴로 목록을 보여주자고 생각함 🍔

기존 스타일은 그대로 두고 모바일 @media 처리를 이용하여 새로운 스타일을 넣었다.

 

햄버거 메뉴로 목록을 열었다 닫았다 할 수 있다.

 

모바일 환경에서 우측 하단에 햄버거 메뉴 버튼을 넣어 누를 경우 목록이 왼쪽에서 오른쪽으로 슬라이딩하게 구성했다.

햄버거 메뉴는 모바일 환경에서만 표시되며, 메뉴를 연 상태에서는 닫기 아이콘으로 변경된다.

또한 모바일 전용으로 넣은 버튼 꾸러미가 꽤 마음에 들어 웹 브라우저 환경에도 적용했다.

 

 

기존의 버튼 꾸러미는 add, copy 등 직설적으로 표현했지만, 아이콘을 넣어 표현하니 더 간결하고 보기 좋아졌다.

---

 

테마 변경 기능

테마 변경 모드를 적용한 javascript-archive

 

사실, 반응형 처리 작업을 진행하고 나서 scss를 적용하여 테마 변경 기능도 노려보았다.

한번도 scss를 써본 적이 없기에, 테마 모드 작업을 진행하면서도 이렇게 사용하는 게 맞나 싶을 정도로 의아했다.

 

각종 컬러셋을 만들어 놓고 light 모드일 경우와 dark 모드일 경우 색을 다르게 나타나게 해 작동은 되게 만들어 놓았다.

하지만 아직 아쉬운 점이 많고, scss에 대한 공부도 더 필요하다고 생각되어 하는 수 없이 브랜치에다가 커밋해놓은 상태.

 

각종 환경에서 많이 테스트해보고 이슈 관리도 하려니 재밌으면서도 어렵다.

가령 pc 환경에서는 보이지 않던 버그들이 모바일 환경에서는 보인다.

맥북에서는 스크롤바가 공간을 차지 않기 때문에 스타일 밀림 현상 등이 가려졌지만 윈도우에서는 그로 인해 중첩 스크롤바가 생기는 등 환경에 따라 많은 이슈가 보인다.

 

그래도 온전히 내가 만들고 있다는 점에서 애착이 생기고, 그렇기에 더 잘 만들어보고 싶어진다.

이 작은 프로젝트로 시작해서 더 많은 서비스를 만들고 운영해보고 싶다.