Untitled

Untitled

<aside> 💡 빅픽처인터렉티브 인턴십 지원을 위해 직접 dak.gg 홈페이지와 poro.gg 홈페이지의 디자인을 직접 해보고, 그 결과와 아쉬운점에 대해 정리해보고자 한다.

</aside>

<aside> 💡 실제로 기능적인 부분을 구현하는 것이 목표가 아니기 때문에 기능적인 부분은 없고, 디자인을 위한 프로젝트이다.

</aside>

시작 동기

우선 빅픽처인터렉티브에 인턴십을 지원하겠다고 마음을 먹게 된 것은 제출 마감일인 6월 8일의 딱 일주일 전인 6월 1일 수요일이었다.

이력서를 써야겠다고 마음을 먹었지만, 그동안 해놓은 프로젝트 중에 마땅히 내 현재 프론트엔드 구현 능력에 대한 스킬을 잘 보여줄 수 있는 프로젝트가 부족하다고 판단했던 나는 입사하고자 하는 기업의 프로젝트들을 내 입맛대로 재구성해보면 어떨까 라는 생각을 가지게 되었다.

우선 주어진 시간이 일주일 밖에 남지 않았었고, 심지어 기말고사 시즌에 껴있는 바람에 기말고사 공부도 같이 하면서 프로젝트를 만들려면 빅픽처인터렉티브의 모든 웹 사이트를 건드릴 수 없다고 판단하였고, 이에 2가지 페이지만 골라 디자인적으로 재구성을 해보기로 결심하였다.

그 중 하나는 빅픽처인터렉티브의 자회사인 플레이엑스피의 종합 전적 검색 사이트인 dak.gg의 메인 페이지였고, 나머지 하나는 개인적으로 리그 오브 레전드, 줄여서 롤이라 부르는 게임을 지금도 즐겨 하고 있기에 롤 전적 검색 사이트인 poro.gg 의 메인 페이지를 선택하게 되었다.

원래는 데스크탑과 모바일 버전 2개를 전부 할 계획이였지만, 그러기엔 시간적 여유가 부족했기 때문에, 모바일 뷰로만 디자인을 재구성하자고 결정하게 되었다.

Dak.gg

Untitled

Untitled

우선 dak.gg 의 원본 페이지는 다음과 같다. dak.gg의 로고와 언어를 선택할 수 있는 드롭다운 버튼이 있다.

그리고 그 뒤로 dak.gg에서 제공하는 여러 전적 서비스를 게임별로 나누어 제공하고 있는 모습을 볼 수 있다.

사진에는 보이지 않지만, 아래에 dak.gg의 회사정보를 담고 있는 footer도 존재한다.

재구성 설계

우선 지금 상태로도 나쁘지 않지만, 개인적으로 해당 페이지를 디자인적으로 재구성한다면, 내가 최근에 관심을 보이고 있는 애니메이션을 좀 추가하여 페이지를 꾸며도 괜찮겠다는 생각을 하게 되었다.

우선 롤을 대표로 하는 라이엇 게임회사와 관련 된 4가지 게임(롤, TFT, 룬테라, 발로란트)를 하나로 묶어 내고,

나머지 게임들은 장르적 특징에 따라 2개씩 묶어서 보여주기로 결심하였다.

내부에 들어가는 애니메이션에 대한 설명은 결과 페이지에서 더 자세하게 설명하겠다.

결과