졸업가능? 프로젝트 리팩토링 - 반응형 웹 뷰 구현하기(1)

배성규·2023년 2월 8일

프로젝트

목록 보기

1/10

졸업가능 프로젝트를 1차적으로 완성하여 제출 후, 부족한 부분을 보완하기 위해 리팩토링 작업에 들어가기로 했다.

1. 모바일 뷰 호환방법 정하기

현재 프로젝트는 FHD사이즈를 기준으로 만들었기 때문에, QHD급인 화면이나 모바일뷰로 보려고하면 구성이 다 깨져서 보였다.

(아이폰 XR 기준에서 보여지는 화면)

1-1.반응형 웹? 적응형 웹?

반응형 웹 : 감지된 화면 크기에 따라 자동으로 페이지가 재배열되는 유동적인 접근 방식
적응형 웹 : 브라우저가 주어진 플랫폼에 맞춰 특별히 생성된 레이아웃을 불러오는 웹 디자인 유형

반응형 웹

장점

모든 플랫폼에서 일관된 콘텐츠 경험
새로운 기기에서도 작동이 가능

단점

동적인 콘텐츠를 불러오는 데 더 많은 작업이 요구되어 웹사이트 성능 저하
요소가 잘못된 순서 또는 크기로 재배치되는 경우 시각적 계층 구조를 방해
각 기기에서 웹사이트가 렌더링되는 방식에 대한 통제가 상대적으로 어려움
디자인에 대한 더 많은 전문 지식이 필요하고, 플랫폼 간 테스트 및 디자인 조정을 요함

/* Mobile - Portrait */
@media (max-width: 575px) {}

/* Mobile - Landscape */
@media (min-width: 576px) and (max-width: 767px) {}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {}

/* Desktop */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Desktop (Large) */
@media (min-width: 1200px) {}

분기를 하는 기준에는 2가지 방법이 있다.
1. 모바일 뷰를 먼저 (min-width를 사용)
2. 데스크톱 뷰를 먼저 (max-width를 사용)

MDN 기준 모바일 퍼스트 방식이 선호되는 최상의 접근법이라 함

적응형 웹

장점

각 플랫폼 및 상황과 맥락에 맞춰 제공되는 완벽한 맞춤화된 경험
원하는 기기에 맞게 최적화된 디자인을 할 수 있는 고성능 작업 수행
광고 및 타사의 통합 콘텐츠에 대한 간편한 맞춤화

단점

콘텐츠가 모든 기기에서 일관되지 않을 경우 seo에 부정적인 영향을 미침

1-2. 선택한 방법

데스크톱 뷰를 우선으로 하여 반응형 웹을 선택하여 개발을 진행하기로 했다.

선택한 이유

네이버나 다음처럼 방대한 양의 정보를 보여주는 것이 아니기 때문에 템플릿을 새로 만들 필요가 없음
적응형 웹페이지에 비해 다양한 기기에서 화면이 깨지는 등의 문제없이 사용가능하다.
데스크톱 뷰는 완성되어있으므로 그 뷰를 기준으로 모바일 뷰를 설정하면 되기 때문에

2. 구현하기

2.1 폰트 설정

먼저 px단위로 지정되어있는 부분을 rem단위로 변경했다.
html에서 기본적으로 사용되는 px은 16px인데 폰트 사이즈를 62.5%로 변경하여 1rem == 10px로 처리했다.

#root{
	font-size : 62.5%; // 1rem == 10px 
}

미디어 쿼리를 사용하여 반응형 웹을 구성할 수 있다. 선택할 수 있는 미디어 유형은 4가지가 있다.

all
print
screen
speech

적용 결과

모바일뷰(max-width 768px) 기준이 되면 폰트 사이즈와 버튼 크기들을 수정해서 반응형으로 추가했다.

2.2 네비게이션 바

모바일 뷰 화면에서 아래와 같은 사진처럼 네비게이션 바가 변경되는 것을 확인할 수 있다.

햄버거바로도 불리는 네비게이션 핸들링을 모바일 뷰에서 구현해보자.
2.1와 같이 모바일뷰 기준에서 햄버거바가 생성되도록 했다.

구현 방법

기존 네비게이션바는 모바일 뷰가 되면 display:none처리하여 보이지 않도록 했다.

@media (max-width: 768px) {
    .navbar {
        display: none;
    }
}

모바일뷰 상태일 시, 햄버거 바 표시. 헤더 부분에 햄버거바를 설정할 예정이기 때문에 햄버거바와 헤더 이미지와 space-around처리했다.

@media (max-width: 768px) {
    .header {
        justify-content: space-around;
    }
    .header__sidebar {
        display: flex;
        align-items: center;
    }
    .header-img {
        width: 12rem;
    }
    .header__sidebar-icon {
        width: 1.8rem;
    }
    .header__sidebar-reject {
        width: 1.5rem;
    }
}

햄버거바를 누르면 네비게이션 바가 나와서 선택할 수 있도록하고, x를 누르면 다시 햄버거바가 나올 수 있도록 구현했다.

// code..
   const [isToggled, setIsToggled] = useState(false);
   const handleToggleSide = () => {
        setIsToggled(!isToggled);
    };
//code.. 
   {isToggled ? (
                    <div className="header__sidebar">
                        <img
                            className="header__sidebar-icon"
                            src="imgs/sidebar.png"
                            alt="icon"
                            onClick={handleToggleSide}
                        ></img>
                    </div>
                ) : (
                    <div className="header__sidebar--toggleMode">
                        <div>
                            <div>
                                <img
                                    alt="reject"
                                    src="imgs/reject.png"
                                    className="header__sidebar-reject"
                                    onClick={handleToggleSide}
                                ></img>
                            </div>
                            <Link to="Notice" >
                                공지사항
                            </Link>
                            <Link to="KyRecommend" >
                                인기교양추천
                            </Link>
                            <Link to="Graduate" >
                                졸업요건확인
                            </Link>
                            <Link to="Board" >
                                정보공유게시판
                            </Link>
                            <Link to="Feedback" >
                                피드백하기
                            </Link>
                        </div>
                    </div>
                )}