그동안 회사에서 3개 정도의 굵직 굵직한 프로모션 페이지 개발을 맡게 되었다.
프로모션 페이지는 잠시동안만 사용자에게 오픈되는 페이지지만, 다양한 디자인과 애니메이션 기법들을 사용하여 사용자들의 이목을 끌어야하고, 여러 제휴사나 관련 부서와 협업해야 하므로 준비 기간 동안 많은 사람들과 커뮤니케이션 등이 필요하게 된다.
프로모션 페이지 개발을 하면서 알게 된 레슨 런드에 대해 정리해보고자 한다. (ᵔ๑ᵕ̳ ᴥ ᵕ̳๑)っ‧⁺.* ೃೀ
프로모션 페이지 개발의 특징
1. 로직은 매우 단순하다.
다양한 예외 처리나, 오류 케이스 처리가 있는 서비스 개발 프로젝트와는 다르게, 프로모션의 경우 로직이 매우 단순한 편이다. 이벤트 내용을 보여주는 것이 주된 로직이고, 이외의 로직 처리는 이벤트 응모 버튼이나, 응모 내역 조회 정도로 매우 단순하다. 따라서 테스트해야 하는 내용도 적은 편이라, 다른 페이지로 랜딩이 잘 되는 지, 이벤트 응모가 잘 되는 지 정도만 확인하면 된다.
=> 개발 난이도는 매우 쉬운 편이다.
2. 사진/비디오 처리가 필요하다.
프로모션 페이지 특성상, 다양한 헤더, 폰트, 배경 이미지, 버튼 등이 적용되는 경우가 많아 많은 이미지 또는 영상이 사용된다.
위 배달의 민족 프로모션 페이지에서 사용된 쿠폰 받기 버튼이나 2배 더 커진 혜택 모두 이미지로 처리되어있다. 일반 서비스에서는 시스템 폰트나 css로 처리할 내용을 더 높은 주목도의 디자인을 위해 다양한 이미지를 사용하여 처리하는 것을 확인할 수 있다.
=> 리소스가 많을 수록 페이지 로딩이 느려지는 원인이 되므로 이에 대한 적절한 처리가 필요하다.
3. 릴리즈 전까지 계속되는 변경 사항
제휴사와 관련되어 있는 프로모션일 경우, 관련 협의가 프로모션 전까지 계속되며, 디자인이나 기획의 내용에 대해서 제휴사 및 여러 부서의 컨펌을 받아야 하는 상황이 종종 생긴다. 프로모션 페이지의 일부 영역이 페이지 오픈 하루 전 날에 결정되거나, 심지어는 프로모션 오픈 후에 변경되는 상황도 왕왕 생긴다.
=> 변경 사항이 생길때마다 페이지를 배포하게 되면 여러모로 불편하므로, 변경사항에 유연하게 대처하도록 개발해두는 것이 좋다.
프로모션 페이지 개발을 더 유연하게 하는 법
1. 에러 디자인에 대해서 요청하기
대부분의 기획서는 해피 케이스에 대해서만 명시하므로, API 오류 케이스에 대해서 정리한 후 오류 페이지에 대한 기획 및 디자인을 요청하자. 오류 페이지 디자인에도 시간이 소요되므로 필요한 디자인 요청을 가장 먼저하는 것이 좋다.
👩💻나: 안녕하세요! 개발 검토 중 1번 영역에서 API 에러일 경우에 대한 고려가 필요하여 요청 드립니다~ 해당 영역에서 API는 유저가 혜택을 받을 수 있는 대상인지 판단하는 역할을 합니다. 에러 발생 시 영역 전체를 안보여주는 것보다, 대상 or 대상 아님을 제외한 디자인을 넣으면 어떨까하여 관련 디자인 요청드립니다.
👩🎨디자이너: 이정도 톤앤매너 괜찮을까요?
2. 이미지/비디오 로딩에 대한 최적화
이미지가 많을 수록 페이지 로딩을 느려지기 때문에 페이지 로딩 최적화를 위해 다음과 같은 내용들을 고려해야 한다.
- 이미지 lazy loading을 사용하여 프로모션 페이지를 연 후에 필요한 이미지 파일들을 나중에 로드하도록 한다.
- 압축 프로그램을 사용하여 이미지 파일 크기를 최소화한다.
- 이미지/비디오 로딩 또는 재생이 실패할 경우에 대한 처리를 추가한다.
- 이미지를 나중에 로드하도록 하므로, 로딩이 실패했을 경우에 대한 fallback image를 설정한다.
- 비디오의 경우 이미지에 비해 용량이 크므로, 로딩이 실패했을 경우에는 대체 이미지를 보여준다.
- 핸드폰 설정에 따라 비디오 자동 재생이 막혀있는 경우가 있으므로(ex 아이폰 저전력모드), 이 경우에도 대체 이미지를 보여준다.
=> 아이폰, 안드로이드, 느린 네트워크 환경, wifi 환경 등 다양한 핸드폰 환경으로 테스트해보는 경험이 필요하다.
3. 변경 사항에 대해 미리 대비할 수 있도록 개발해두기
👩💻나: 확정되지 않은 배너, 푸터 등은 언제 확정된다고 생각하면 될까요?
👩💼마케터: 배너 영역은 프로모션 오픈 전날에나 나올 거 같아요, 다른 링크로 넣어놓고 나중에 url 교체 가능할까요?
뒤늦게 결정되는 영역의 경우, 이미지 및 url을 교체하게 된다면 배포가 필요하다. 만약 변경사항이 생길때마다 배포를 하기 위해 코드 리뷰를 다시 받고, 승인을 받고, 테스트를 하고 배포 모니터링을 한다면 상당히 귀찮을 수 밖에 없다.
따라서 적당한 어드민을 구축하여 마케터가 변경사항을 수정하면 바로 프로모션 페이지에 반영할 수 있도록 해두는 것이 좋다. 프로모션 페이지에서 해당 어드민에 저장된 정보를 불러오는 api를 호출하여 프로모션 영역을 세팅하는 방식으로 개발해두는 것이다.
어드민 구축이 어렵다면, 적당한 CDN을 활용하여 프로모션 정보를 json 형식으로 저장해놓는 방법도 있다.
3. 프론트 개발자로서 낼 수 있는 의견을 적극적으로 보여주자.
👩🎨디자이너: 이 영역을 스크롤할 때 영역이 잠시 걸렸다가 다시 스크롤되도록 구현 가능할까요?
👩💻나: 다른 프로모션 페이지에서 그렇게 구현된 것을 본 적이 없는데, 레퍼런스가 있을까요? 없다면 불가능합니다. 대신 B 프로모션 페이지에서 구현했던 이 방식은 어떠세요?
디자이너가 생각하는 방식을 개발로 구현하는 것은 또 다른 문제이다. 실제 구현 방식을 참고하기 위해 레퍼런스를 요청하자. 또한 불가능으로 답변하지 말고 가능한 대안을 최대한 제시하도록 하자.
👩💼마케터: 헤더 영역이 너무 길어서 밑에를 스크롤해볼 것 같지 않은데, 헤더 영역을 줄일 수 없을까요?
👩🎨디자이너: 헤더 영역을 줄이기 위해서는 다시 디자인 테스트 및 재작업이 필요해서 일정 측면에서 어려울 것 같습니다.
👩💻나: 유저가 5초 동안 아무런 반응을 하지 않는다면, 아래 영역으로 자동 스크롤해주면 어떨까요?
고치고자 하는 문제를 기획이나 디자인 관점이 아닌 개발의 관점에서 가능한 방안에 대해서 제시해보자. 생각보다 문제가 더 쉽게 풀릴 수 있다.
4. 개발 용어를 최소화하여 커뮤니케이션 하자.
마케터와 디자이너는 개발자가 아니다. 불필요한 개발 용어를 최소화하여 커뮤니케이션했을 때 더 효과적으로 소통이 가능했다.
결론
역시 개발도 여러번 해야 경험 스택이 쌓이는 법. 프론트엔드 개발의 매력은 여러 직군의 사람들과 소통하면서 여러 방면으로 문제를 바라볼 수 있다는 점인 것 같다. 같은 프로모션 페이지라도 어떻게 하면 셀링 포인트가 될 지에 대한 마케터가 보는 관점, 어떻게 하면 지연을 최소화하고 서버 부하를 줄일 수 있을까 하는 백엔드 개발자가 보는 관점, 어떻게 하면 깔끔하고 눈에 확 들어오게 만들가에 대한 디자이너의 관점까지. 프론트엔드 개발자는 모든 관점을 받아들여 조율할 수 있는 중간 위치에 있다. ค₍ᐢ•ܫ•ᐢ₎ค
.
'프로젝트 > 경험정리' 카테고리의 다른 글
| 무조건 SSR을 하면 좋은걸까? 극단적인 SSR의 문제점 (1) | 2023.12.10 |
|---|---|
| 타입스크립트에서 중복되는 타입 선언 리팩토링하기 (1) | 2023.11.26 |