포폴 사이트 피드백과 반응형 디자인 적용하기(feat. 자기소개 사이트)

 

이번에는 반응형 디자인 관련하여 발생한 이슈를 해결했던 과정을 정리하고자 한다. 네이버에 다니시는 선배님의 피드백이 있었는데 카카오톡에서 발췌한 일부 내용은 다음과 같았다.

 

특히 말씀해주신 이슈들중에서 1번 이슈에 대해서 해결했던 과정을 정리하고자 한다.

 

<이슈>
모바일 디바이스 기반에서 메인화면을 스크롤을 했을때 빈 흰 화면이 보이는 이슈가 있는거 같다.

 

 

위에 상술한 문구가 이해가 안간다면 해당 화면을 보면 이해할 수 있다.

 

메인 페이지에서 화면을 길게 내리거나 올리면 보이는 흰 화면

 

body {
  height: 100dvh;
  overflow: hidden;
}

 

일단 메인페이지의 상위 요소인 body에 스크롤을 방지하고자 overflow: hidden을 적용하였고 뷰포트의 높이를 동적으로 조절하고자 100dvh로 설정하였다. 다만 이렇게 할 경우 발생하는 문제는 만약 html이 body보다 큰 화면일 경우 스크롤이 발생할 수 있다. 그래서 이후에 html, body로 작성하여 html에도 해당 css가 적용되도록 하였다.

 

또한 최상위 요소인 body에다가 position: fixed를 설정하였다. overflow: hidden을 통해 스크롤을 차단함과 동시에 브라우저 UI의 뷰포트가 바뀌어도 고정된 위치에 렌더링 되도록 하였다.

 

즉, position: fixed를 통해 자식요소가 ‘뷰포트’에 붙박이가 되어서 화면 크기가 변하더라도 요소 자체는 움직이지 않도록 한 것이다. 그리고 body의 하위요소이자 자식요소인 메인페이지의 최상단 컴포넌트에는 h-full을 설정하였다. 여기서 중요한 점은 body를 고정적으로 설정해놨기 때문에 h-full을 통해서 자식요소가 부모요소에 꽉 차도록 할 수 있다. 

 

<global.css에 작성된 html, body css>

html,
body {
  color: rgb(var(--foreground-rgb));
  height: 100dvh;
  overflow: hidden;
  position: fixed;
  width: 100%;
}

 

 

<메인 페이지>

<div
  ref={containerRef}
  className="w-full h-full bg-black relative flex flex-col text-white fade-in envelope gap-4"
>
  <Header
    handleNavClick={handleNavClick}
    menuOpen={menuOpen}
    toggleMenu={toggleMenu}
  />

  <div className="flex justify-center items-center flex-grow relative">
    <div className="flex justify-center items-center w-full h-[250px] px-4 sm:px-0">
      <Typewriter
        texts={[
          "배움이라는 취미로",
          "사용자 경험 개선에 집중하는 프론트엔드 개발자 정준영 입니다.",
        ]}
        typingSpeed={120}
        pauseDelay={1000}
        onType={handleCharacterTyped}
      />
    </div>
  </div>
  <div id="circle" className="circle"></div>
</div>

 

 

배포 링크는 다음과 같고 적용된 화면이 궁금하다면 모바일로 들어가보면 된다. 

 

https://portfolio-web-site-drab.vercel.app/

정준영의 포트폴리오