프로젝트
MARKUP
모바일 퍼블리싱 90%
2019.10.21 ~ 2019.12.20
넥센타이어의 'NEXT LEVEL' 프로젝트에 참여하여 모바일 마크업을 전담.
일반적으로 모바일에서는 볼륨을 줄이는 것과 달리 전체적으로 PC와 동일한 볼륨의 콘텐츠를 제공하는 과정이 필요했기에 PC보다 더 복잡한 작업 과정이 발생하였음. 간단한 예로 PC는 단순히 마우스 오버에 의한 TIP 표현이 가능하나 모바일에서는 팝업으로 대신해야 하는 등 코딩을 하는데 재활용 요소가 부족했음.
요구사항
- 무조건 일정 최우선
기본적으로 필요로 하는 최저 스펙에 대한 가이드가 잡혀있지 않은 상황이었기 때문에 주요 사용자에게 제공되는 서비스나 콘셉트 등의 기술 자체가 새로운 시도임을 감안, 모바일 단말기의 최소 화면 사이즈를 360 정도로 잡고 최신 OS라는 가정하에 마크업을 진행하기로 하였음. 태블릿 대응은 애초에 작업 대상에 포함되어 있지 않아서 그나마 모바일만을 기준으로 하여 일정을 맞출 수 있었던 것이라 생각됨.
프로젝트 자체의 난이도보다 일정에 대한 압박이 강한 프로젝트였기에 새로운 콘텐츠에 대한 이해도를 높이거나 재미를 느끼기엔 부족한 기간이었다 생각됨.
마크업
- 전체 프로젝트의 기반 프로그램 언어는 JAVA
- 마크업을 위한 환경은 Gulp로 구축
- css 컴파일에는 scss를 사용
- HTML의 작성에는 gulp의 fileinclude를 적용
fileinclude를 사용할 경우 생성된 마크업의 인덴트 조정이 어려웠으며 include의 편리성은 확보되지만 생성된 HTML의 인덴트가 깔끔하지 못한 점이 문제점이라 생각되었음.
초반 작업에는 쇼핑몰이 가지고 있는 향후의 관리 코스트를 고려하여 프로젝트 전반에 걸쳐 모듈화에 주의를 기울이고자 하였으나 복잡한 구조와 미묘한 정보의 차이로 인해 중반 이후의 작업에서는 공통 요소를 재활용하기 애매한 소스들이 산재하게 되어 약간 유명무실해진 상태가 되었고, 단지 마크업을 하는 데 있어 약간의 편리함을 느낄 수 있는 수준에서만 사용되었음.
작업 초반에는 최대한 기존에 작업된 PC 측 소스를 기반으로 작업을 진행하려 하였지만, 다른 작업자의 소스를 이해하고 따라가면서 작업하기에는 시간적 여유가 부족하여 독자적으로 진행하기로 협의 후 진행하였음. 이전 프로젝트에서 작업하면서 손에 익혔던 방식을 약간 발전시켜서 진행.
접근성 관련
접근성에 대해선 이슈가 잡혀 있지 않았지만 가능한 신경 쓰면서 작업하였으나 이번 프로젝트에서 가장 아쉬운 부분..
새로 알게 된 것
가능한 먼저 진행된 개발자들의 편의를 위해 PC에서 이미 사용된 플러그인을 사용하였으며 처음으로 modalEffect.js, fullpage.js를 사용해 볼 수 있었음. 팝업으로 인해 modalEffect는 이번 프로젝트에서 가장 많이 사용된 플러그인이라 여겨짐.
fullpage
메인에서 사용된 fullpage의 경우 사이드 메뉴에서 사용하기 위해 만들었던 레이어가 전체 사이트를 통틀어 fullpage가 사용된 메인 페이지에서만 터치 스크롤이 먹통이 되는 현상이 발생하여 고심하고 있었는데 fullpage의 최신 버전이 유료화됨에 따라 프로젝트에서 사용을 하지 못하게 되었고 무료로 지원되던 버전을 사용하는 순간 문제가 해결되어 원인은 찾지 못했지만 해결되었음. 아직도 이유는 불분명...
modalEffect
modalEffect 역시 처음으로 접해본 플러그인 이어서 사용법을 익히는데 약간 문제가 있었음. 일반적으로 팝업 계열 플러그인들이 그렇듯이 호출하는 쪽과 호출된 쪽의 짝이 맞지 않으면 생기는 에러가 프로젝트에서도 빈번하게 발생하여 작업자들 간에 고생이 있었음.
기본적으로 호출하는 쪽의 data-modal 값과 호출된 창의 id값이 동일해야 하며 호출하는 쪽에서는 md-trigger라는 class가, 호출된 쪽에서는 창을 닫기 위한 md-close가 필수로 존재해야 함.
아쉬운 점
작업자로서 고민은 했지만 상류 단계에서 이미 흐려진 상태여서 작업 단계에서 조정할 수 없는 환경이었던 것이 컴포넌트 설계였던 것 같음.
정말 간단하게 예를 들어 보자면, 1번을 사용한 화면이 있을 때 1번을 최대한 활용해서 정보를 정리하는 것이 좋지만 2번, 3번, 4번 같은 기획, 화면이 계속 나오면서 마크업에서는 1번을 유지하면서 2, 3, 4번을 만드는 과정이 생기는데 여기서 문제가 발생하게 되는 것은 만드는 건 문제가 없지만 수정, 유지보수 때마다 이 모든 것을 기억하고 있어야 한다는 것이 문제점이 될 수 있음. 또 한 가지 문제는 어쩔 수 없다면 어쩔 수 없는 문제로서 개발단계에서 1번으로 작업된 소스로 개발을 하다가 1번과 비슷한 2번, 4번이 나왔을 때 개발자는 1번을 가져다 사용하고 화면이 깨진다는 말을 하게 되는 경우가 발생하게 됨. 사소한 것 같지만 작업에 들어가는 시간비용이 늘어나게 되고, 결국은 프로젝트 전체에 영향을 미칠 수 있는 문제여서 무척 아쉬운 부분이라 생각됨.
힘들어도 Atomic Design 같은 개념적인 부분을 작업 초반에 기획, 디자인, 마크업, 개발의 각 파트 간에 공유하는 시간을 가지며 조금 더 컴포넌트에 대한 이해도를 높일 수 있었다면 좋았을 것 같다 생각되었음. 어떤 프로젝트라도 이런 부분을 고려하여 기획, 디자인 단계에서 좀 더 시간을 투자하여 설계가 이루어졌으면 좋겠다는 생각을 매번 프로젝트 때마다 다시 하게 되는 것 같은...
마무리
일반 쇼핑몰과 달리 타이어에 특화된 렌탈, 구매라는 아이템이 독특하였음. 타이어 제작, 판매에 대한 도전 등 진취적인 분위기를 느낄 수 있었지만 개인적으로는 프로젝트 기간에 조금 더 여유가 있었다면 마크업의 질을 더 높일 수 있었을 텐데라는 아쉬움이 남는 프로젝트였음. 운영까지 생각한다면, 한 달 정도의 운영 업무가 주어졌다면 조금 더 적절한 코드로 조정해 나갈 수 있었을 것 같은 아쉬움이 남는 프로젝트였음.
PC는 이미 개발이 상당수 진행된 단계에서 모바일은 로그인 쪽만 잡힌 채, 작업 진행이 되지 못하고 있었기에 통합 테스트까지 남은 한 달 정도에 모바일 페이지의 80~90%를 제작해야 하는 상황이라 무척 고생했던 프로젝트로 일정에 대한 압박은 프로젝트의 질을 낮추게 되는 주요 원인 중에 한 가지라는 불변의 진리를 다시 느낄 수 있었음.