들어가며

처음 PL을 하게 되었을 때, 무엇을 체크해야 하고 무엇을 챙겨야 하는지 몰라 막막했었던 기억이 있습니다. 그럴 때 참고할 수 있는 체크 리스트를 작성해 보았습니다. 꼭 PL이 아니더라도 작업자가 작업 들어가기 전에 체크해야 할 사항이기도 하니 한 번쯤 읽어보고 참고하면 좋을 것 같습니다.

 

이 글은 제 개인적 경험을 바탕으로 작성했으며, 프로젝트 경험이 쌓일 때마다 메모해둔 내용을 정리하는 것이니, 본인 프로젝트와 연관된 내용만 참고하셔도 됩니다.

기본적인 체크 리스트

1. 서포트 브라우저 범위

   • PC : IE(IE를 포함한다면 버전까지), safari, chrome 등
   • Mobile : 대응 기기(플립, 폴드, iPhone SE 등 해상도 특이 케이스) 및 버전 (iOS, Android), 대응 인앱 브라우저 리스트 (카카오톡, 인스타그램, 네이버 등)
   • App : 인앱 브라우저 엔진 확인

2. 반응형 or 적응형 확인

   • 반응형이라면? 브레이크 포인트가 몇 개 인지 확인
   • 적응형이라면? PC 최소/최대(기준) 해상도 확인, 모바일 최소 해상도 확인
3. IA 리스트에 오류 페이지 (404 등)가 없다면 추가 요청 필요
4. IA 없이 진행되는 프로젝트는 IA 요청 후, 해당 IA 기반으로 이슈 및 진척 관리
5. 화면 아이디 확인 (화면 아이디가 없다면 요청해서 받을 것)
6. top, 이전 버튼 유무 확인 필요 (특히 모바일일 경우 - 처음에 누락되었다가 나중에 추가되는 경우가 많아 미리 확인해두면 좋음)

7. 모바일인 경우

   • APP : status bar 작업 유무 확인 필요
   • 가로모드 지원 유무 확인 필요
   • iOS 경우 하단 fixed 요소가 있는 상태에서 form 요소 포커스 시 fixed가 풀리는 버그 있음 (디자인에 미리 form 요소가 있는 페이지에서 하단 fixed 요소 지양 요청해두면 좋음)
8. 크로스 브라우징은 반드시 필요합니다. 때문에 미리 PC/Mobile, IE/chrome/safari 접속에 따른 클래스 추가 스크립트를 작성해두는 것이 좋습니다.
9. 이슈 리스트 파일 필요 (이슈가 생길 때마다 리스트에 추가하고 해당 이슈에 대한 처리 상세 내용/ 이슈 처리 날짜/ 이슈 처리에 대한 의사 결정권자 이름 필수 기입)
10. 페이지 리스트 필요 (페이지 리스트에 디자인 전달 일, 작업 상태, 작업 완료일, 디자인 수정 일, 최종 수정 일 필요)

SPA 프로젝트일 경우 체크 리스트

1. 레이아웃 컴포넌트는 반드시 작업되어야 합니다.
2. 라우터 이동 시 scrollTop 값을 0으로 만들어주는 작업이 필요합니다.

3. 데이터 통신 및 관리를 어떻게 할지 정의가 필요합니다.

   • vue.js 환경일 경우 store 사용 여부 결정 필요 (퍼블리싱 작업만 하는 경우에도 컴포넌트 간의 데이터 이동을 props와 emit만 이용해서 한다면 depth가 깊어질수록 props/emit 지옥에 빠지게 됩니다. store를 사용하는 게 훨씬 편하기 때문에 고려해두면 좋습니다.)

그 외 알아두면 좋을 내용

1. 스크롤 시 fixed 또는 active 되는 이벤트가 들어가는 경우 첫 화면이 로딩될 때 scroll 값을 scrollinit 값으로 추가해 계산하는 수식을 추가해두는 것이 좋습니다. (히스토리 백으로 페이지 이동 시 처음 scrollTop 값이 0이 아니어서 화면이 깨지는 경우가 있음)
2. 이미지 alt 작업 시 200 ~ 250자 내외로 작성을 권장합니다. (스크린 리더기에서 제한 두는 글자 수는 없으나 통상적으로 250자 이상으로 설정해두는 경우가 많지 않아 200 ~ 250자 내외로 작성을 권장)
3. iOS 모달 팝업 작업 시 body에 overflow:hidden 은 동작하지 않습니다. (body-scroll-lock 라이브러리 사용 권장)
4. iOS에서 리사이즈 이벤트 사용 및 스크롤 시 주소창이 사라질 때 리사이즈 이벤트가 일어나니 width 사이즈 변화일 때만 리사이즈 이벤트가 일어나야 한다면 window.innerWidth 비교로 조건문 추가가 필요합니다.

5. iOS는 가로모드 변경 시 폰트를 자동으로 두 배 확대시킵니다.

   • 가로모드 확대 방지 css

   html {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
   }

6. iOS는 user-scalable=yes 이고 input 요소가 16px 이하면 input 요소 포커스 시 화면 확대가 일어납니다.

7. iOS safari 브라우저 자체적으로 disabled 색상을 강제로 연하게 처리합니다. (disable 디자인이 있을 경우 해당 부분 reset 이 필요함)

   • iOS safari disabled css reset

     input:disabled {
       -webkit-text-fill-color: inherit;
       opacity: 1;
     }

8. iOS는 100vh 사용 시 주소 창 높이까지 잡아서 불필요한 스크롤이 생깁니다. 브라우저 높이에 맞게 스크롤 없는 화면이 필요하다면 별도로 스크립트 작업이 필요합니다.

   • 브라우저 높이 값을 구한 뒤 vh를 다시 계산해 주는 script 추가

     const appHeight = function () {
     const vh = window.innerHeight * 0.01;
       document.documentElement.style.setProperty('--vh', vh + 'px');
     };
     appHeight();
     window.addEventListener('resize', appHeight);

   • css에서 사용 예시

     .test {
       height: 100vh;
       height: calc(var(--vh, 1vh) * 100);
     }

9. swiper.js는 4.5.1 버전까지는 IE를 지원합니다.

10. swiper slide 사용 시 첫 화면이 display: none 이면 slide 가 init 되지 않는데 그럴 때는 옵션 값에 observer: true 와 observeParents: true 를 추가해 주면 됩니다. (상위 요소의 변화에 따라 swiper 초기화)

    • swiperjs 공식 문서 참고

11. IE input에 붙는 못생긴 X 버튼은 css로 간단히 삭제 가능합니다.

    • IE input 텍스트 삭제 버튼 css reset

      input::-ms-clear {
        display: none;
      }

마치며

다양한 프로젝트들을 경험하며 지금까지 하나둘씩 메모해뒀던 것들을 정리해봤습니다. 저의 경험들이 우리 그룹원들 뿐만 아니라 다른 누군가에게도 도움이 된다면 기분이 좋을 것 같습니다.