프로젝트
MARKUP
기획 50% / 퍼블리싱 100%
2019.03.11 ~ 2019.09.30
국기원(관련 프로젝트)의 모바일 신규 앱 구축 작업에 참여.
프로젝트 초반에는 기획파트에서 화면 구성 관련 작업을 진행하였으며 디자인 작업 이후 프로젝트 전반의 마크업 엔지니어로 근무함. 실제로는 웹앱이지만 외부에서 웹으로의 접근을 막고 있어 앱으로만 확인 가능.
기획 포지션에서 작업을 한 뒤 전체적인 사이트의 구성을 이해하고 있었기 때문에 디자인이 나오기 전까지의 시간을 마크업 작업의 기반을 만드는 작업에 사용할 수 있었고 이 시간을 활용한 덕분에 개인적으로는 후반부에 접근성 부분을 조금 더 관심을 가지고 테스트해 볼 수 있었음.
요구사항
- 차후의 프로젝트를 위해 모듈화에 신경 쓸 것
- 장차법에 통과될 수준의 페이지를 만들 것
초반 요구사항 중 가장 큰 두 가지였으며 장애인의 접근성을 고려(인증마크 획득이 목적은 아님)하였음. 음성지원 부분을 주의하여 data-*, WAI-ARIA을 최대한 적용시키고자 하였음.
마크업
전체 프로젝트의 기반 프로그램 언어는 JAVA가 사용되었음. 마크업을 위한 환경으로는 Gulp로 마크업 환경을 구축하였으며 CSS 컴파일에는 .scss를 사용하였고 HTML의 작성에는 gulp의 fileinclude를 사용하여 Header, Footer 등의 중복되는 부분의 반복 작업을 줄여 템플릿화에 주의하였고 향후의 관리 등을 고려하여 프로젝트 전반에 걸쳐 모듈화에 주의를 기울였음.
접속자의 권한별로 구별되는 메인화면의 복잡한 구성을 위하여 부득이하게 메인화면용과 다른 모든 페이지를 포함하는 두 개의 CSS로 구성하게 되었으며 PC보다는 CSS3 사용에 비교적 자유로운 flex요소를 주로 사용하여 레이아웃을 구성하였음. 프로젝트의 개발환경 중 grid 속성을 지원하지 않는 OS 버전을 포함하고 있어 전체적인 레이아웃은 flex를 사용하여 구성.
본 프로젝트에서는 버전업에 대한 의존성을 지양하고자 프레임워크 도입을 배제하였으며 모바일 단말기에 한정되지만, RWD대응으로 작업하였고 Space in Design Systems에서 기본적인 영향을 받아 다음과 같은 성격의 레이아웃 시스템을 구성하여 작업하였음.
접근성 관련
해당 프로젝트의 경우 접근성 인증 마크를 취득하는 것이 최종 목표는 아니었지만, 그에 준하는 수준을 요구하였기에 인증마크 취득을 고려하면서 작업하였음. 판단기준은 가벼운 편으로 브라우저에서 제공되는 검수 툴을 사용하여 통상적으로 통과되는 수준을 기준으로 잡고 진행하였음.
데스크톱 파트의 마크업에서 C-WAX를 기준으로 잡고 있어서 모바일에서도 동일한 기준을 적용하기 위하여 C-WAX로 진행하였으며 이 검사에서 오차범위를 만족시키는 정도면 과제는 달성이었지만, 작업하면서 다른 툴을 병행하여 크로스 체크하면서 작업하였음.
 |
C-WAX 스코어 100점을 기준으로 진행 |
 |
Web Developer 에러 메세지가 없음을 확인 |
 |
Lighthouse 안정권인 90-100이 유지되도록 작업 |
마무리
마크업 전에 기획 포지션(Planner)으로 접근해서 작업해 볼 수 있었던 흔하지 않은 프로젝트로 좋은 경험이었음. 가능한 전체 프로젝트에서 각 파트의 사람들이 모여 초반에 기획을 잡는 것부터 시작할 수 있다면 무척 좋은 프로젝트가 될 수 있을 것 같다는 생각을 해 볼 수 있었던 프로젝트임.
단순히 와이어프레임의 작업을 하는 것일 수도 있지만 실제로 디자인에 들어가기 전에 와이어프레임을 통해 가상 시뮬레이션을 해볼 수 있으며 개발이나 마크업을 하는 실무자가 기획 단계에 참여하게 되면 미연에 방지할 수 있는 부분도 있어서 많은 도움이 될 수 있을 것 같아 가능하다면 힘은 들겠지만 도전해 보고 싶다 생각하게 되었음. 물론 깔끔하게 각 파트 간에 업무가 완료된다면 좋겠지만 그렇지 못할 경우 이것도 저것도 되지 않는 상황이 발생할 수 있기 때문에 주의는 필요하다 생각됨.