Project Slow-postbox #4 반응형 웹페이지 구현

시작하며

프로젝트를 시작할때 Bare minimum, Advanced, Nightmare 난이도에 따라 구현하는 기능들을 나누었는데 CSS의 Media query를 활용하여 Advanced에 해당하는 반응형 웹페이지를 구현하였다. 다른 페이지들은 기능 구현이 끝나지 않아서 일단 내가 맡은 파트만 경험 삼아 태블릿과 모바일에 맞춰서 반응형 웹페이지를 구현하였다.

미디어 쿼리 분기점 설정

분기점을 흔히 사용하는 태블릿 사이즈와 모바일 사이즈에 맞춰서 두 개의 분기점을 추가하여 반응형 웹페이지를 구현하였다.

/*태블릿*/
@media (min-width: 481px) and (max-width: 768px) {
...
}

/*모바일*/
@media (min-width: 320px) and (max-width: 480px) {
}

네비게이션 바

태블릿 환경의 경우 max-width정도 외에 별도의 설정 없이도 의도한 대로 웹페이지가 구현되었는데 모바일의 경우 네비게이션에 버튼이 많다보니 폰트가 두 줄이 되는 현상이 일어났다. 폰트 사이즈를 맞춰서 바꾸는 경우 너무 글씨 크기가 작아지기 때문에 width가 480px가 되었을 때는 버튼들이 아이콘으로 대체될 수 있도록 CSS 속성을 설정해주었다.

/*모바일*/
@media (min-width: 320px) and (max-width: 480px) {
  .navBar-container {
    position: fixed;
    width: 100vw;
    height: 60px;
    background-color: white;
    z-index: 99;
  }

  .navBar-container .bar {
    display: flex;
    height: 60px;
    align-items: center;
    width: 100%;
    max-width: 450px;
    min-width: 320px;
    margin: 0 auto;
  }

  .navBar-container .bar div {
    font-size: 1em;
    text-align: left;
    cursor: pointer;
    color: rgb(90, 90, 90);
  }

  .navBar-container .bar div:hover {
    font-weight: 500;
  }

  .navBar-container .bar .home {
    flex: 1.4;
    color: #e84b35;
    font-weight: 800;
    font-size: 0rem;
    font-family: 'Gaegu', cursive;
  }

  .navBar-container .bar .home::after {
    content: '';
    background-image: url('../img/logo.svg');
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
    display: block;
  }

  .navBar-container .bar .mailBox {
    flex: 1;
    font-size: 0rem;
  }

  .navBar-container .bar .mailBox::after {
    content: '';
    background-image: url('../img/recmailbox.svg');
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    display: block;
  }

  .navBar-container .noti-on::after {
    position: absolute;
    content: '';
    width: 1em;
    height: 1em;
    background-color: rgb(255, 255, 255);
    border-radius: 0%;
  }

  .navBar-container .bar .sent {
    flex: 1;
    font-size: 0rem;
  }

  .navBar-container .bar .sent::after {
    content: '';
    background-image: url('../img/sentmailbox.svg');
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    display: block;
  }

  .navBar-container .bar .write {
    flex: 1;
    font-size: 0rem;
  }

  .navBar-container .bar .write::after {
    content: '';
    background-image: url('../img/paper_plane_icon.svg');
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    display: block;
  }

  .navBar-container .bar .login {
    flex: 0.5;
  }

  .navBar-container .bar .login span {
    display: block;
    text-align: center;
    vertical-align: middle;
    background-color: #e84b35;
    padding-top: 3px;
    color: white;
    width: 80px;
    height: 30px;
    border-radius: 10px;
    font-weight: 700;
  }

  .navBar-container .bar .signup {
    flex: 1;
    text-align: right;
    margin-left: 10px;
  }

  .navBar-container .bar .mypage {
    flex: 0.9;
    text-align: left;
    margin-right: 10px;
    font-size: 0rem;
  }

  .navBar-container .bar .mypage::after {
    content: '';
    background-image: url('../img/mypage.svg');
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    display: block;
  }

  .navBar-container .bar .admin {
    flex: 0.2;
    text-align: right;
  }

  .navBar-container .bar .hidden {
    visibility: hidden;
  }
}

홈

홈페이지의 경우 폰트 사이즈 외에 크게 변경해야 하는 부분은 없었고 웹사이트에 대한 설명 스크립트 부분의 flex-direction을 태블릿 사이즈 부터 column으로 설정하여 그림과 설명이 한 열로 나오도록 변경하였다.

  .home-container .box-script-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 200px;
    text-align: center;
  }

관리자페이지

관리자 페이지는 네비게이션 바처럼 보여지는 데이터가 많다보니 모바일 사이즈에서 한 화면에 나타내는데 무리가 있었다. 특히 편지 관리 페이지는 받은 사람과 보낸사람의 이메일 주소가 나타나다 보니 한 행에 모든 데이터가 표시되기 위해서는 알아보기 힘들 정도로 폰트 사이즈를 낮춰야 했다. 그래서 id가 표시되는 열은 display:none 속성으로 없애고 이메일 열은 text-overflow: ellipsis를 사용하여 뒷부분이 ...으로 표시되게 하였다.

.adminMail-container .box-table table td.email span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 80px;
    display: inline-block;
}

마치며

미디어 쿼리의 사용법도 익히고 왜 다른 사이트에서 모바일 페이지를 따로 만드는 지 이유도 알 것 같았다. 태블릿까지는 괜찮지만 모바일 환경은 사용자에게 보여지는 화면이 작기 때문에 그에 맞춰서 UI를 변경해줘야하는데 CSS 속성만으로 적용하기에는 한계가 있기 때문에 따로 페이지를 만드는 것이 좋은 방법이라는 생각이 들었다. 4주 프로젝트에는 서비스의 특성에 맞게 반응형 페이지 혹은 모바일 전용 페이지를 만들어야겠다.