판교 게임회사 인턴이 만든 첫 브랜드 사이트! 개발 후기
회사에서 인하우스로 브랜드 사이트 개발을 한다고 하셨다.
인하우스로 한번도 진행된 적이 없었고, 그런 팀이 존재하지도 않지만,
게임 스튜디오 측에서 니즈가 있다고 해서 처음으로 우리 팀에서 진행하게 되었다.
그래서... 마침 우연찮게 기회가 생겨서 브랜드 사이트 개발에 참여하게 됐다.
브랜드 사이트 개발 기간 동안 여기에 매몰되어 있어서 주 업무가 따로 있다는 점에서
주업무에 대한 이해도가 떨어질 수도 있겠다는 걱정이 드는 건 어쩔 수 없는듯 하다. 저.. 따라갈 수 있겠죠..? ㅜㅜㅜ
개발환경은 서포터님께서 모노레포로 구성해주셔서 기술 스택은 자연스럽게 Next.js, tailwind, 그 외 기타 라이브러리들.
tailwind는 초반에 사용하다가 pure CSS로 변경했다. (하지만, 아직 일부는 tailwind로 남아있다..!)
크롬 브라우저, 2560 * 1440과 1920 * 1080 해상도에 최적화되어있다. 최대 width 기준 2560px까지만 지원한다.
처음에는 모바일/웹 뷰로 나눠서 개발하려고 하기도 했고, 게임 스튜디오 측에서 PC 해상도 관련 요구사항도 없었기 때문에 반응형 작업은 진행하지 않으려 했으나, 거의 오픈 막바지 쯤 본인 욕심에 아주 조금 반응형도 추가 해놓았다.
(PC 뷰와 모바일 뷰로 구성되어 있어서 렌더링 되는 페이지가 다르다.)
✅ 배운 점, 그리고 후기
회사 특성상 퍼블리셔나 웹 디자이너가 없기 때문에..ㅠㅠ
커뮤니케이션 스킬과 알잘딱깔센 스킬(?)....이 크게 늘은 것 같다.
일단 시안도 피그마가 아닌..! png 파일로 전달 받았기에 눈대중으로 확인하며 작업해야 했다.
디렉터님께서 당장은 어쩔 수 없기 때문에 다음 브랜드 사이트까지만 png 시안을 허용하고,
이후부터는 웹 디자이너 배치 안해주면 진행 안 된다고 전달해주신다고 하셨다..!
컬러라던가, 위치와 같은 레이아웃 작업이 그래서 더 오래 걸렸다.
리소스도 누락되거나 사용 어려운 것들 직접 체크해보고 재요청드려야 했고,
생각보다 전달받은 이미지 사이즈가 커서 이미지 로드가 너무 오래 걸리는 퍼포먼스가 떨어지는 문제가 있었다.
평소에 개발할 때 이미지를 많이 사용했던 적이 없어서 이미지가 성능에 엄청 큰 영향을 주는 것을 직접 체감할 수 있었다.
기술적인 이슈라 하기엔 사실 대단한 기능이 들어가는 사이트가 아니다 보니 발생할 일은 거의 없었지만, 풀페이지 라이브러리를 사용하면서 충돌되는 이슈들이 간혹 있었던 점..?..ㅎㅎ
게임 스튜디오 분들도 웹쪽 경험이 없으셔서 계속 슬랙으로 소통하느라 고생하셨을 것 같다.
물론 나도 이번 기회를 통해 현업에서의 개발 외 직군과 소통할 수 있다는 값진 경험을 할 수 있었다.
처음에는 인턴이라 어디까지 나대도 되는지 몰라서 서포터님을 통해 문제를 전달드리곤 했는데,
이게 굉장히 비효율적이기도 했고, 서포터님도 다른 업무로 바빠 보이셔서 어느 순간부터는 그냥 알아서 나대기로(?) 했다.
1차 QA때 꼭 참여하고 싶었는데 피로누적으로 인해 오후 병가를 쓰는 바람에 QA 참여 못한 게 제일 아쉽다.
시연하면서 피드백 받는 경험 해보고 싶었는데..ㅠㅠ
자동화 배포와 같이 서버쪽으로 필요한 것들은 서포터님이 지원해주셨다.
아무튼, 프론트 개발은 온전히 맡겨주셔서 굉장히 나이스한 경험이었다.
(서포터님! 이 자리를 빌려 감사드려요..! 🙇♀️)
lazy load가 반드시 좋은 것은 아니었다.
갤러리 페이지 쪽 이미지 로드가 너무 느려서 사용자 경험이 떨어진다고 판단하여 eager 되도록 변경했다.
lazy load도 상황에 따라 적재적소에 쓰는 게 좋을 듯하다.
✅ 아쉬운 점
Next의 이미지 최적화와 같은 기능을 온전히 사용하지 못했던 점.
메타태그도 더 스마트하게 써볼 수 있었을 것 같은데.......ㅋㅋㅠㅠ
무엇보다 성능적인 이슈가 제일 제일 아쉽다.
이건 차후의 나만의 과제로 남겨놓고 가능하다면 조금씩 개선해보고자 한다.
변동 사항이 생기는 부분이 있어 일정을 맞추다 보니 기술적으로나 클린코드와 같은 디테일한 부분을 놓치고 진행했던 점도 아쉬웠다.
(주먹구구식으로 개발한 것도 있다는 의미....ㅠ)
국가별로 언어 대응해야하는 부분이 있어서 어쨌든 고도화를 해야하므로 이때 아쉬웠던 이슈들을 조금 더 잡을 수 있으면 좋을 것 같다.
또, 모바일 페이지와 PC 페이지가 나뉘어 있는데 공통적으로 사용하는 부분에 대한 체크가 미숙했던 것 같다.
캐릭터 페이지쪽 apng 이미지가 캐싱되어있지 않은 상태에서는 로드가 좀 오래 걸린다.
기술적으로 해결 가능할 것 같으니 고민해봐야겠다.
✅ 개선할 것들
- 이미지 최적화
- 레이아웃 쉬프트 현상 개선 (초반에 개발하면서 개선했는데 아직 섹션별 타이틀 쪽 개선이 안된 것으로 확인했다.)
- 이미지 로드 시점 변경
- 리팩토링 (고도화하면서 같이 진행해야 할 듯.)
✅ 결과물
부끄럽지만 첫 브랜드 사이트 결과물.
브랜드 사이트는 8월 14일(월)에 공개되었고, 게임 하드 런칭은 24일이다.
만관부~ 포사가 대박기원💙
포트리스 사가, Fortress Saga: AFK RPG
본격 요새 육성 RPG - 포트리스 사가 (Fortress Saga)
fortress.cookapps.com
게임쪽은 브랜드 사이트 홍보에 비용을 쓰는 것보다 게임 홍보에 비용을 쓰는 게 더 좋다고 들어서
사이트가 많이 알려지거나 방문수가 크진 않겠지만 소중한 포트폴리오가 생겼다. 🥰
(아무리 봐도 캐릭터 페이지 쪽 캐릭터 프레임 클릭했을 때 이미지 뜨는 게 너무 느려서 신경쓰인다... 또르르)