릴리즈 결과물
혹은 사이트 방문
- PC
- Mobile
행사 소개, 제휴 단체 · 공연, 더 알아보기, Footer 파트 개발
페이지 상단 캐릭터 배치, 아티스트, 티켓팅 안내 파트 개발
2021.05.28 ~ 2021.06.25 약 1달
오른쪽이 디자인상 배치도, 왼쪽이 개발을 이용하여 수정한 내용
디자인 원본으론 위와 같이 캐릭터가 포함되어있지 않고 투명으로 처리된 이미지와
투명이 포함된 캐릭터 이미지로 구성되어있습니다.
2장의 이미지가 제공되었지만 단순히 곂쳐 놓을 경우 캐릭터가 원형으로 뚤린 이미지로 부터 튀어나오는 느낌에 어색한 부분을 남길 수 있습니다.
이를 해결하기 위해 이미지를 배치하였을 시 곂치는 영역의 픽셀값을 2장의 이미지로 부터 각각 가져옵니다.
작업할 이미지를 먼저 로드한 다음
getImageData 를 이용하여 red, green, blue, alpha 순서로 이루어진 일차원 배열을 원하는 크기 만큼만 로드 합니다.
다음으로 2장의 이미지 각각에서 가져온 필셀 중 원형 이미지에서 비어있는 부분일 경우엔 캐릭터 이미지의 픽셀 값으로 갱신시킵니다.
비어있는 부분이 아닐 경우엔 기존픽셀에서 약간의 가중치를 더하였는데
그 이유는 캐릭터 디자인 주변으로 그림자 효과가 들어가 있었기 때문에 주변 색과 원본 색이 튀어 보이는 문제 점이 있었기 때문입니다.
오른쪽이 단순 회전시 발생하는 문제, 왼쪽이 개발을 이용하여 수정한 내용
티켓팅 안내 이미지를 단순 회전 시키면 이미지가 렌더링 되어지는 가로 크기에 따라서 가로 스크롤 이 생기고, 양 끝에 하얀색 여백이 생겨지는 문제 존재합니다.
이 부분을 캔버스 렌더링 방식과 비율에 따른 자동 스케일링, 반응형 좌표 이동을 개발하여 해결하였습니다.
위 그림의 경우 회전하면 회전 각에 따라 양 끝점의 좌표가 y = ax + b 에 의해 대략적으로 예측 되어집니다.
예를들어 대략 3도 정도 기울였을시 cos(3° * Math.PI / 180) 로 x,
sin(3° * Math.PI / 180) 로 y 값이 (0.999, 0.0519) 로 구해지면
원점을 지나는 일차 함수의 기울기를 구할 수 있습니다.
이를 이용하여 이미지가 렌더링 되어질 전체 높이 크기를 구한 다음
그려질 캔버스 높이 크기와 비율을 계산하여 축소시킨 이미지로 렌더링 하였습니다.
물론 브라우저 크기 변화에 따라 다시 렌더링해야 할 경우엔 이벤트 리스너 등록시켜서 렌더링 호출 시킵니다.
- Firestore 규칙 설정
나중을 위한 DB 쓰기 권한 개념을 설정 해놓았습니다.
위의 경우 등록되어진 계정 중 admin 권한을 부여한 계정만이 해당 페이지의 데이터 수정을 어플리케이션 단에서 접근이 가능합니다.
컨텐츠 중에서 변동 가능성이 높은 항목들이 존재합니다.
아티스트 목록의 경우 후보가 새로 등록되어지거나 삭제 될 수 있습니다.
Firestore 를 사용하였기 때문에 /page/utaconne-landing 의 artist 배열 타입의 필드에 해당 정보를 입력하였으며,
페이지 초기화시 데이터를 읽어와 DOM 에 반영합니다.
티켓팅 안내의 경우에도 가격, 날짜, 안내사항이 수시로 변경될 수 있는 항목들이 존재합니다.
같은 방식으로 DB에 데이터를 정의한 후
캔버스에 티켓팅 안내 렌더링을 할 시 텍스트 정보를 렌더링 시키는 방식으로 구현하였습니다.