[개인 프로필 사이트] 4. 허브 페이지 기능 구현

Intro

허브 페이지를 만든 이후 여러 환경에서 테스트 해본 결과 크게 2가지의 문제점이 발견됐다.

 

1. 모바일 화면에서 화면이 제대로 보여지지 않는다.
2. 화면에 3개의 섹션과 메뉴 버튼 뿐이라 페이지가 너무 허전해보인다.

이 문제들은 다음과 같은 방법으로 해결할 수 있다.

 

1. 모바일과 같은 세로형 화면에선 다른 UI를 보여주도록 media 쿼리를 추가한다.
2. UI 이미지 또는 배치를 수정한다.

우선 첫번째 문제부터 해결해 보자.

 

모든 코드는 github에 업로드 해두었습니다.

아래의 링크를 클릭하여 소스코드를 보실 수 있습니다.

https://github.com/DevJaewoo/DevJaewoo.github.io

DevJaewoo/DevJaewoo.github.io

---

모바일 화면 표시 오류 수정

media 쿼리를 사용하여 문제 해결이 가능하다.

CSS에 다음과 같은 쿼리를 추가한다.

화면이 세로 모드이고, 현재 화면의 픽셀이 일정 이하가 되었을 시 몇몇 개체의 속성을 바꿔주는 코드이다.

@media (orientation: portrait) and (max-width: 900px) {
    
    .logo {
        top: 54px;
    }

    .logo h1 {
        font-size: 50px;
    }

    .portfolio, .feedback, .hobby {
        width: 100%;
        height: 100vh;
    }

    .content h3 {
        font-size: 30px;
    }
    
    .content p {
        font-size: 25px;
    }

    .menu {
        position: fixed;
        top: 70px;
    }

    nav {
        position: fixed;
        width: 100%;
        right: -100%;
    }
}

@media (orientation: portrait) and (max-width: 600px) {

    .logo {
        top: 65px;
    }

    .logo h1 {
        font-size: 30px;
    }

    .content h3 {
        font-size: 25px;
    }
    
    .content p {
        font-size: 17px;
    }
}

---

하지만 media 쿼리문을 작성했을 때 제대로 적용이 되지 않는 경우가 있다.

 

모바일 기기의 경우 웹페이지 전체를 읽어들인 후 자신의 크기에 맞춰 화면을 출력하는데, 이때 Viewport 속성에 따라 출력되는 크기가 정해진다.

 

이와 같은 경우 모바일 기기에서 화면을 출력하지만 사실상 Viewport 속성에 정해진 크기로 인식되기 때문에, media 쿼리에서 현재 픽셀 수를 기반으로 한 조건문을 정상적으로 통과하지 못한다.

 

따라서 아래의 코드와 같이 현재 모바일 기기의 출력 너비를 Viewport의 크기로 정해주는 작업이 필요하다.

HTML의 head 태그 내부에 추가하면 된다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

추가 이후 정상적으로 동작하는 것을 확인할 수 있다.

이미지를 클릭해야 정상적으로 재생된다

---

UI 업데이트

UI 설정을 하면서 항상 섹션 중앙에 그냥 이미지가 아닌 "움직이는 이미지가 있었으면 좋겠다" 라고 생각해 왔었다.

3시간의 험난한 삽질 끝에 해당 서비스의 URL을 입력하면 svg 파일을 자동으로 추가시켜주는 Lottie Web Player라는 라이브러리를 발견하여 적용시켰다.

 

Lottie Web Player를 사용하는 방법은 아래 포스팅에서 확인할 수 있다.

2021.06.02 - [Tips/Front-end] - [HTML] Lottie Web Player를 사용하여 움직이는 이미지 출력

[HTML] Lottie Web Player를 사용하여 움직이는 이미지 출력

 

 

기존의 img 태그들을 다음과 같이 변경했다.

<div style=" width: 100%; max-width: 1000px; height: 100%; max-height: 1000px;">
    <a href="./subpages/portfolio/index.html"><lottie-player src="https://assets10.lottiefiles.com/packages/lf20_8hddy41z.json"  background="transparent"  speed="0.4"  loop autoplay></lottie-player></a>
</div>

 

LottieFiles의 애니메이션을 사용하려면 해당 애니메이션의 저작자를 표시해야 한다.

https://lottiefiles.zendesk.com/hc/en-us/articles/900002475966-How-do-I-give-attribution-for-a-Lottie-animation-I-ve-used-

 

위의 사이트에 표시된 정보에 의하면

Animation made by

<저작자> from

www.lottiefiles.com 

의 포맷으로 작성하면 된다고 한다.

 

그래서 각 애니메이션 아래에 다음의 코드를 추가했다.

<div class="attribution">
    Animation made by<br>
    <a href="https://lottiefiles.com/jigneshgajjar">Jignesh Gajjar</a> from<br>
    <a href="www.lottiefiles.com">www.lottiefiles.com</a>
</div>

 

그리고 섹션의 우측 하단에 흰색 글씨로 표시하도록 CSS에 다음의 코드를 추가했다.

section .attribution {
    position: absolute;
    right: 5%;
    bottom: 5%;
    max-width: 40%;
}

.attribution, .attribution a {
    color: #FFFFFF;
    text-align: center;
    font-size: 15px;
    line-height: 30px;
}

---

결과

 

결과물이 아주 만족스럽다.

다음엔 포트폴리오 페이지를 만들어야겠다.