A사 모바일 웹 작업 프로젝트

🐜  프로젝트 개요

1. 프로젝트 기간 : 2024.12.12~2024.12.19 (약 1주간)

2. 기술스택 

-퍼블리싱 : html, css, jquery

3. 협업 툴 : Github, Figma

4.웹 유형/해상도기준/ 디자인 너비 : 모바일 웹 / 500px/ 350px

 

📝 프로젝트 설명

: 전자영수증 서비스로, 가맹점에서 큐알코드를 찍으면 자동적으로 전자영수증을 발급받을 수 있도록 모바일 웹으로 연결되는 기능을 메인으로 한다. 기존에 브랜드별 어플리케이션을 각각 다운받아야하는 불편함 없이 가맹점 어디에서나 사용이 가능하다. 현재는 네이버나 카카오 전자문서로 저장이 가능하며, 탄소중립실천포인트 가입하여 연결해 두면 영수증을 받을 때마다 포인트 적립이 가능하다.

 

 

 

😎 새롭게 경험한 것  / 잘한 것

1. 실제 미팅에서  커뮤니케이션

: 이 회사에 와서 고객사와 직접 미팅을 해본 것은 처음이었는데, 서비스에 대한 이해도를 높일 수 있었고 기본적인 정책이나 요구사항을 이해하는데 도움이 되는 기회였다. 이해한 것을 바탕으로 팀원과 함께 이야기해가면서 작업하여 요구사항 반영에 적극적으로 참여했다.

 

2. 크로스 브라우징 

: 웹에서 작동이 위치나 레이아웃이 잘 반영되더라도 모바일 웹에서는 기본 헤드나 푸터 때문에 높이값이 제대로 조정이 되지 않는 경우가 있는데 실제로 확인하여 수정하는 작업을 진행했다. 

 

😰 아쉬웠던 점

 

- 기획서가 없이 회의 내용으로만 작업해야 했던 것

: 페이지 수가 많지 않아서 아주 크리티컬한 부분은 아니었지만 기획서가 제대로 된 문서로 되어 있는게 아니라 구두로 들은 내용을 토대로 작업해야하는 경우여서 의견을 정리하는 것이 조금 어려웠다.

 

 

🤓 배운 것들

1. 토글 버튼 만들기

토글버튼은 흔히 보는 것인데 처음 작업해 봤었다. 직접 커스터마이징 하면서 만들어보니 생각보다 단순하고 간단했던 것 같다.

<div class="toggle">
   <label>
      <input role="switch" type="checkbox" />
   </label>
 </div>

//토글버튼
.toggle {
  label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;

    input[type="checkbox"] {
      display: block;
      appearance: none;
      position: relative;
      border-radius: 37px;
      width: 41px;
      height: 20px;
      background-color: $gray200;
      &:before {
        content: "";
        position: absolute;
        top: 2px;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: $white;
        transition: left 250ms linear;
      }

      &:checked {
        background-color: $primary;
        &::before {
          left: 22px;
        }
      }
    }
  }
}

 

2. 모바일 웹에서의 높이값 수정

100vh를 사용할 때, 모바일 웹에서는 실제 화면 높이와 다를 수 있다. 특히 아이폰에서는 주소창이나 툴바가 화면에서 사라지거나 나타날 때 높이값이 변경 되기도 하여. 100vh를 직접 사용하는 것 보다 실제 뷰포트 높이를 계산해주는 코드를 추가하는 것이 좋다.

//높이값 크로스 브라우징 
function setFullHeight() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', setFullHeight);
setFullHeight();

 

 

3. 팝업창 화면 가운데에 띄우는 코드 

function popupPosition() {
  $('.popup').css({
    "top": (($(window).height() - $('.popup').outerHeight()) / 2 + $(window).scrollTop()) + "px",
    "left": (($('body').width() - $('.popup').outerWidth()) / 2 + $(window).scrollLeft()) + "px",
  });
};