[Imhere 개발일지 #1] 모바일 환경에서의 UI 최적화를 해보자 📱

김유진·2023년 5월 23일
개발일지
0

React

목록 보기
61/64
post-thumbnail

이번에 GDSC에서 스터디 출석체크/수강신청에 사용하는 서비스인 Imhere!의 디자인, 그리고 프론트엔드 기능 리팩토링을 맡게 되었다.
기존 Imhere 서비스는 백엔드 개발을 하시는 분 께서 프론트엔드 개발하실 분을 따로 구하지 않고 혼자서 1인 개발로 진행하신 것이라서 온전히 프론트엔드 지향적인 설계가 이루어지지 않았다.

그래서 폴더 구조를 개선하고, 디자인 시스템을 다시 잡으면서 공통 컴포넌트와 디자인, 테마를 적용하면서 개발하기 편한 환경으로 개선하였다.

1. 폴더 구조, 컴포넌트 설계 개선

src
├─ component (기능 관련 컴포넌트)
├─ lib
│   ├─ hooks 
│   ├─ api
│   ├─ routes
├─ page
├─ ui (UI 공통 컴포넌트)
│   ├─ assets
│   ├─ components
│   ├─ layout
│   ├─ util

이렇게 폴더 구조를 개선하였다. 기존 폴더 구조에는 component 폴더가 없어서 Page에 모든 블록 요소들이 들어가 있었고, UI 컴포넌트 각각을 디자인하기 위하여 page 안에 styled-component 요소들이 많이 들어가 있었다.

최대한 Page 안에는 page 관련된 내용들만 들어갈 수 있도록 바꿔보고자 하였고, 아직 개선이 완전히 끝난 게 아니다. 리팩토링과 개발이 계속 진행되고 있기 때문에 꾸준히 지금도 더 나은 컴포넌트 설계를 위해서 고민하고 있다.

더 고쳐야 할 점을 아래 적어보자면,,

  • page마다 useEffect를 통하여 강사/학생 권한을 관리하는데, 공통된 코드가 페이지마다 들어가서 관련된 내용을 custom hook으로 빼는 방향을 생각해 보고 있다.
  • API 폴더 구조 개선이 필요하다. 현재 api 파일에 프로젝트에 쓰이고 있는 모든 함수들이 들어가 있다.
  • bottomsheet 관련한 컴포넌트 단순화, 분리가 필요하다 (중복된 코드 있음)
  • page를 NextJS의 폴더 구조와 같이 바꾸어야 할 것 같다.
  • 네이밍 개선 (구린 이름이 많다)

이 정도로 정리해 볼 수 있겠다. (아직 고칠 게 산더미..) 일단 useEffect를 여러 번 사용하는 부분은 최대한 빨리 custom으로 빼서 정리할 예정이다.
일단 이번 글의 주 목적은 프로젝트 설계 관련한 글이 아니기 때문에 다음 주제로 얼른 넘어가보자.

2. 로컬 환경에서 모바일로 접속하기

이번 프로젝트는 학생들이 강의를 듣다가 휴대폰으로도 쉽게 출석체크를 할 수 있도록 해야 하기 때문에 모바일 반응성을 고려하는 것이 중요하다는 생각이 들었다. 그렇기 때문에 특히 학생 권한 페이지를 꼼꼼히 개선하는 것이 중요하다는 생각을 했다.

사실, 이번 프로젝트를 하기 전까지 모든 localhost환경은 휴대폰으로 확인을 하지 못하는 거 아닌가..?하고 굳이 안해봤었는데, 이번에 모바일 환경을 개선하겠다고 생각하면서 그 방법을 알게 되었다. 매우 간단하다.

  1. PC와 모바일이 같은 와이파이 환경에 접속한다.
  2. PC에서 접속한 와이파이 정보를 얻어온다. 접속하고 있는 네트워크의 IPv4 를 복사한다.
  3. 모바일에서 사파리나 크롬을 열고 검색창에 [ 아이피:포트번호 ]로 검색한다.

빠밤. 로컬호스트 잘 접속했다. 이제 개선해야 하는 부분을 하나씩 뜯어보면서 정리해보자.

3. 사파리 폰트 적용

내가 폰트 적용에 있어서 실수한 부분이 있다. 그래서 Imhere 2버전 첫번째 배포 때에는 모바일 환경에서 사파리가 폰트가 깨져 등장해 Pretendard가 제대로 적용되지 않았다. 그 실수는 무엇이나 하믄...
바로 웹 폰트를 제대로 불러오도록 하지 않아서 woff폰트의 모든 패키지가 올바르게 불러와지지 않았다는 점이다.

폰트의 패키지를 신경쓰는 것이 중요한 이유는 바로 호환성 때문인데, 사용하는 웹 브라우저마다 호환되는 웹 폰트의 포맷이 다르기 때문이다.
아래 다양한 웹 폰트의 호환 포맷에 대하여 정리해보자.

  • EOT(Embedded Open Type): IE8 이하 버전은 .eot파일만 인식
  • oft(OpenType)/ttf(TrueType) : 웹과 문서 파일에서도 사용 가능하다. 대부분의 브라우저에서 지원해준다 (Chrome, Firefox, Opera, Safari, Android, IOS..)
  • Woff(Web Open Font Format) : TrueType이나, OpenType 서체를 압축한 것이다. (Chrome, IE 9+, Safari, Gecko, Opera 지원)
  • SVG(Scalable Vector Graphic): Chrome, Opera, Safari, Opera Mobile 10.0, Safari Mobile에서 지원

하지만 대부분의 폰트는 Woff를 통해서 지원이 되기 때문에 특이한 것 외에 대부분의 호환성을 원활하게 만들고 싶다면 Tff타입이나 Woff를 이용하염 된다.
그래서 코드를 아래와 같이 한 번 개선해 보았다.

@font-face {
        font-family: 'Pretendard';
        font-weight: 700;
        font-style: normal;
        src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot');
        src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot?#iefix') format('embedded-opentype'),
            url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff2') format('woff2'),
            url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff') format('woff'),
            url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.ttf') format("truetype");
    }

이렇게 하면 거의 대부분의 웹 폰트 호환성을 고려하였다고 확인할 수 있다.
그런데 여기서 궁금증이 하나 생길 수 있다...기존 woff를 이용하고 있는데, woff2는 무엇을 의미하는 것일까?

폰트 형식에서 WOFF(Web Open Font Format) 형식과 WOFF 2.0 형식(이하 WOFF2 형식)은 압축된 폰트 형식이다. 같은 계열에 속하는 WOFF 형식과 WOFF2 형식에서는 WOFF2 형식이 30~50% 더 압축된 형식이다.
WOFF2 형식은 Internet Explorer를 제외한 모든 브라우저에서 사용할 수 있다. 그러므로 Internet Explorer에서는 WOFF 형식을, 나머지 브라우저에서는 WOFF2 형식을 사용하도록 해서 폰트의 용량을 줄일 수 있다 (출처 : 네이버 D2)

이렇게 코드를 고치고 나니까 이제 사파리에서도 글이 깨지지 않고 잘 나오는 것을 확인할 수 있었다.

따단~ 이제 폰트 깨져서 불편했던 거 한 시름 놨다.

4. 사파리 개발자 도구 이용하기

그동안 몰랐는데, 사파리도 개발자 도구가 있다. 크롬 환경에서 사파리 호환성을 검사하다 보니까 불편해서 아예 그냥 사파리 개발자 도구 켜서 개발하자! 라는 생각이 들어서 세팅을 해 보았다.

따단~ 코드가 잘 보인다. 개발자 도구도 잘 사용할 줄 알아야 한다. ㅎㅅㅎ
이번에 반응형을 개선해 보면서 여러 브라우저의 호환성을 고려하기 위하여 각각의 CSS의 접두사를 붙여서 호환 관련된 코드를 작성하였는데, 이와 관련하여서도 내용을 한 번 정리해보고자 한다.

  • -webkit- : 구글, 사파리 브라우저에 적용
  • -moz- : 파이어폭스 브라우저에 적용
  • -ms- : 인터넷 익스플로러에 적용하지만, 보통 생략한다.
  • -o- : 오페라 브라우저에 적용한다.

브라우저 별로 적용할 스타일을 작성해 주고, 맨 마지막에 기본 속성을 작성해 두는 것이 맞다.

Imhere 같은 경우 현재 바텀시트 애니메이션이 사파리 환경에서 잘 적용이 안되는 현상이 있어서 -webkit-을 붙여서 해결해보고자 하였다. 

const Wrapper = styled.div`
    width: 100%;
    height: 100%;
    position: relative;
    bottom : 0;
    box-sizing: border-box;
    height: 100%;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    padding: 16px 16px;
    background-color: white;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    @-webkit-keyframes moving {
        0% {
            -webkit-transform: translateY(100%);
        }
        100% {
            -webkit-transform: translateY(100%-300px);
        }
    }
    @keyframes moving {
        0% {
            transform: translateY(100%);
        }
        100% {
            transform: translateY(100%-300px);
        }
    }
    -webkit-animation: moving 800ms ease;
    animation: moving 800ms ease;

    -webkit-transform: translateY(calc(100% - 300px)); 
    transform: translateY(calc(100% - 300px));
`

뚜둥~ 이렇게 잘 마무리를 할 수 있었다.
이렇게 해서 모바일 반응성 관련하여 조금 아쉬웠던 부분들을 모두 보완할 수 있었다.
이제 version2에 나왔던 자잘한 아쉬웠던 점들을 싹 다 리팩토링 해서 버저닝을 열심히 해 보도록 하자~

출처 : 웹 폰트 사용과 최적화의 최근 동향

profile
김유진
이전 포스트

[커비샵 개발일지 #4] Recoil로 장바구니 상태 관리하기

다음 포스트

[Imhere 개발일지 #2] github action을 이용한 S3 배포, cloudfront, 버전관리 자동화

0개의 댓글