레이레이랩

website

January 2023
UXUI, Web development

Advertising agency

광고대행사 aL은 채용 및 잠재적 클라이언트 홍보를 위해 웹사이트를 새롭게 구축하였습니다.
약 30개가 넘는 포트폴리오를 홈페이지에 꼭 담아내고 싶다는 클라이언트의 요구를 반영하기 위해, 제각각 다른 컨셉의 포트폴리오가 정돈되어 보이는데 주안점을 두고 디자인을 작업했습니다. 광고대행사라는 비지니스 특성에 맞게 크리에이티브한 부분을 보여주고자 Webgl를 활용하여 사용자가 신선한 재미를 느낄 수 있도록 인터랙션을 구성했습니다.aL is an advertising agency that builds a new website to promote job openings and potential clients.
In response to the client's request to showcase over 30 portfolios on the homepage, we focused on designing the website to display each portfolio neatly and creatively. We used Webgl to create interactive elements to make the website more engaging and memorable for visitors.

mission

Mission. 1

30개가 넘는 주요 프로젝트들을 모두 보기 쉽게 아카이빙이 될 것을 클라이언트가 요구하였습니다.The client requested that all of their main projects, which number over 30, be easily accessible and archived.

Mission. 2

웹사이트 주요 타깃이 광고주뿐만 아니라 입사 지원자도 타깃이기 때문에, 그들에게 필요한 정보를 빠르고 매력있게 전달하는 것이 필요했습니다.Since the main target of the website is not only potential clients but also job applicants, it was important to quickly and attractively convey the information they need.

Mission. 3

단순 포트폴리오 아카이빙이 아니라, 광고회사의 아이덴티티를 살려서 크리에이티브적인 요소를 보여줄 것을 요구하였습니다.The client requested that the website not only archive their portfolio but also showcase their creative elements while maintaining their identity as an advertising agency.

direction

Direction. 1

그동안 진행해온 브랜드 리스트, 프로젝트가 곧 광고회사의 주요한 요소인 점 을 착안하여, 일반적으로 기업소개에 들어가는 CEO인사말, 연혁, 철학 등의 내용을 메인에서 제거하고, 포트폴리오를 처음부터 쉽게 접근할 수 있도록 유도하였습니다.We removed the usual content such as CEO messages, history, philosophy, etc. from the main page and guided users to easily access the portfolio from the beginning.

Direction. 2

다양한 컨셉의 많은 프로젝트들이 혼잡하게 보이지 않도록, 각각의 작은 썸네일 이미지를 만들어 원형태의 배치 모양을 만들고, 나머지 필요 없는 UI요소들을 최대한 정리하여 심플하게 구성되도록 노력했습니다. 단순 아카이빙보다는 차별화 된 크리에이티브가 느껴질 수 있도록, Webgl기술을 활용하여 정보를 표현하고자 했습니다.We created small thumbnail images for each concept to ensure that the various concepts did not look crowded. We also removed unnecessary UI elements to make the website simple and focused on the portfolio.

development

Front-end

NEXT.js, Three.js, GSAP, SASS

Back-end

Vercel, Prismic