파이널 프로젝트 2주차 회고록
UI 프로토 타입 짜보기
월요일 아침부터 회의 끝에 UI 프로토타입 작업에 들어갔다. 카카오 오븐, Figma 등 UI 디자인 툴은 다양했는데 우리는 Figma라는 툴을 사용하여 UI 프로토타입을 작업하기로 했다.
첫번 째 문제 발생
야심차게 Figma 툴을 사용해서 UI 프로토타입을 제작해보려 했지만, 나를 포함해 팀원들 누구도 Figma를 사용해 본 적이 없었다. 마침 옆 팀에서 Figma로 UI 프로토타입을 제작했길래 어찌저찌 물어보면서 완성할 수 있었다.
블로그 글들을 보니 Figma를 이용해 마인드맵과 메뉴 구조까지 구현하는 사람들도 많았는데 우리는 그럴 시간적 여유가 부족했기 때문에 대충 어떤 식으로 페이지를 디자인할 건지 각 카테고리의 대표적인 페이지들만 구성했다
소통 그리고 또 소통
작업을 하면서 팀원들과 회의할 것도 많았고, 머릿속이 온통 프론트와 백엔드는 어떻게 구성할지에 대한 생각뿐이었다.
UI 프로토타입이 나왔으니 그걸 토대로 인트로 페이지를 만들어야 했었는데, HTML/CSS와의 고된 싸움이 시작됐다.
공통으로 사용될 헤더와 푸터를 구성하고 각각 CSS를 적용하니 다른 부분에서 충돌이 발생해 간격이 어긋나고, 홈페이지의 틀 자체가 깨지는 등 여러 문제들이 많았다.
벤치마킹한 사이트를 분석하는 건 생각보다 중요하다.
인트로 페이지의 구성이 끝났으면 각자 어떤 파트를 담당할지 역할을 분배하는 과정이 남아있었고 이 과정도 생각보다 힘든 작업이었다. 우리는 메가박스를 벤치마킹해서 예매 사이트를 구현하기로 했지만 사이트 구성을 꼼꼼히 분석하는 데 시간을 충분히 투자하지 못한 걸 뒤늦게 깨달았고, 각자 역할을 나누기 전에 메가박스를 자세히 들여다보기 시작했다.
오랜 회의와 분석을 통해 사이트의 주요 기능을 크게 다음과 같은 항목으로 나눌 수 있었다
회원관리
- 로그인, 회원가입
- 로그인 페이지 네이버/카카오 간편 로그인, 회원가입 페이지 카카오 주소 API 연동
마이페이지
- 예매/구매내역, 관람권, 쿠폰, 문의내역, 회원정보 관리
영화 리스트 및 지점 정보
- 영화 및 지점별 상세페이지, 네이버 지도 API를 연동하여 지점 위치 제공
예매
- 영화, 지점, 시간선택, 인원 및 좌석 선택, 결제 및 완료
- 결제를 위한 아임포트 API 연동
스토어
- 상품 리스트 및 상세페이지, 상품 주문 결제 및 결과확인
- 상품 결제를 위한 아임포트 API 연동
고객 센터
- 공지사항, 1:1 문의 및 답변, 분실물 문의, 관리자 페이지
이렇게 큰 항목으로 나눈 파트를 배분할 때, 우리는 각자의 강점을 최대한 활용하기로 했다. 팀원에게 적합한 파트를 배정하면서도, 서로의 진행 상황을 주기적으로 공유하며 협력하는 것이 중요했다.
나는 회원 관리 파트를 맡게 되었는데, 인트로 페이지를 바탕으로 첫날은 로그인 및 메뉴 모달창을 구현했다. 모달창 안에 들어갈 포스터들이 모달창을 열 때마다 바뀌는 기능도 추가했으며, 그 중 가장 어려웠던 부분은 원본 이미지의 크기에 상관없이 부모 요소에 맞게 자동으로 크기가 변환되는 기능이었다. 이 기능을 구현하는 데 하루 종일 시간을 쏟았다.
결국 다양한 해상도의 이미지를 사용할 때에도 페이지의 레이아웃이 깨지지 않도록 자동으로 이미지 크기를 조정하는 기능을 성공적으로 구현할 수 있었다. 이를 통해서 적절한 CSS 활용과 일관된 페이지 제공이 사용자 경험에 얼마나 중요한 역할을 하는지 깨닫게 되었다.
둘째 날과 셋째 날에는 로그인, 로그아웃 기능과 회원가입 페이지의 필수 기능들을 구현했다. Ajax를 이용한 회원가입 유효성 검사, 로그인/로그아웃 구현 및 로그인 상태에 따른 버튼 변경, 사용자가 회원가입 페이지에서 입력한 데이터가 실제로 회원가입되도록 하는 기능들을 추가했다.
자동 로그인 기능을 위해 세션과 쿠키를 이용하고자 했으나, 구글 크롬에서 서드파티 쿠키 지원을 종료하는 이슈가 발생해서 이 문제를 해결하기 위해 JWT(Json Web Token)를 사용해 보려 했지만, 지금 내 실력으로는 JWT의 구조를 이해하고 적용하는 것이 어려워 최종적으로는 세션만을 이용해 구현하게 되었다.
다음 주에는 회원가입 완료 페이지에 디자인을 추가하고, 최종적으론 카카오/네이버 소셜 로그인 API의 접목을 목표로 해보고자 한다.