loplat Homepage

개요

기존 loplat X에 관한 홈페이지 내용에서 확장되고 있던 사이트를 회사가 가진 기술력을 바탕으로 다양한 솔루션과 기술에 대한 소개페이지 세분화 작업을 진행했습니다.

오프라인 데이터라는 것이 사람들에게 생소한 내용이기 때문에 그와 관련된 아이콘을 직접 제작하였으며, 제작된 아이콘은 홈페이지 뿐만 아니라 리플렛, 현수막, 소개자료 등 다양한 곳에서 활용하였습니다.

www.loplat.com

세부 내용

  • 기간: 2021.09.01 - 2021.10.14

  • 홈페이지 로드맵 세분화 기획

  • 프로토파이를 이용한 인터랙션 디자인

  • After Effects와 Lottie를 이용한 인터랙션 디자인

  • 유지보수를 위한 코드 수

담당 파트

Protopie를 이용한 정교한 인터랙티브 디자인

프로토파이를 이용하여 실제 작동하는 것처럼 제작하여 영상으로 변경하였습니다.

각각의 변수를 설정하고 연동하는 작업을 통해 프로토파이 툴에 대한 이해도가 높아졌습니다ㅏ.

홈페이지를 위한 아이콘 제작

홈페이지의 톤앤매너를 지키기위해 따로 아이콘을 디자인하였습니다. 제작된 아이콘은 리플랫, 소개자료, 현수막과 같이 다양한 곳에서 사용되었습니다.

각 페이지의 디자인 통일성 유지

각 솔루션 소개마다 달랐던 페이지를 통일성있는 디자인으로 변경하였습니다.

문의 페이지 기획

전화문의로 서비스 구매 문의를 받는 것은 쉽게 놓칠 수 있다고 생각하고, 해당 당담자에게 전달되는 시간이 오래 걸린다는 점에서 이메일로 문의하기 내용을 쉽게 전달 받을 수 있게 하자라는 기획으로 제작되었습니다.

구두상으로 남는 문의 내역은 쉽게 잊혀지기 때문에 문의 내용에 어떤 솔루션을 위한 것인지, 무엇을 물어보고싶은지 등 문의자로 하여금 다양한 답변을 받을 수 있게 하였습니다.

유지보수를 위한 개선

급하게 제작된 부분을 수정하고, 이미지를 코드로 고치는 작업을 맡아 진행했습니다.

  • 이미지로 되어있던 테이블을 코드로 변경

  • 동일한 이미지가 다른 이름으로 들어가있던 부분을 통일시키는 작업 진행

  • 이미지로 되어있던 요금제 부분을 코드로 변경

  • 줄바꿈 오류 및 css 오류 수정

어려웠던 점

긴 기획과 짧은 개발 시간으로 인해 웹 최적화를 맞추지 못한 상태로 공개하게 되었습니다. 그로 인해 눈에 보일 정도로 버그들이 많았고, 웹 최적화에도 전혀 맞지않는 부분이 많았던 점이 아쉽습니다.

정리

유지보수 작업을 진행하면서 리액트의 구조와 컴포넌트 형식에 대해 자세히 알게되었고, 사이트가 공개된 후 이전에는 없었던 '문의하기'페이지를 통해 더 많은 사람들이 회사의 솔루션 구매 문의를 넣는다는 긍정적인 피드백을 받았습니다.

Last updated