LG Appliance Finder / IT. Version

Demo : [Appliance Finder IT]

📝 Service Introduce

LG 가전제품을 구매할 수 있도록 재미있는 모션을 이용한 일러스트 디자인의 설문 페이지 구축

• Intro 의 이펙터를 이용한 동적 모션을 통해 사용자의 재미를 유발함
• 일러스트 디자인을 제공하여 좀 더 친근 한 이미지로 하여금 사용자 흥미 유발함
• 원하는 옵션을 선택 할 때마다 해당 옵션의 대한 설명 또는 관련 영상을 한 눈에 볼 수 있음
• LG 에서 제공되는 제품을 script상에서 데이터화시켜 사용자가 선택한 제품만 필터링하여 원하는 제품 노출함
• 사용자의 취향대로 제품을 옵션에 해당하는 제품을 구매 할 수 있음

🛠 Technology

HTML, CSS, Javascript, sass, gulp, jQuery

✒ Part

• 개인 프로젝트 (디자인 제외/ UI & 백단 개발)

📚 Learned

• javascript을 깊게 다뤄보며 동작 원리를 이해하고, 자동화 시스템의 필요성에 대해 알게 됨
• json 데이터를 가져와 사용자와 선택한 데이터 값과 매칭시켜 결과를 노출 시키는 형식으로 다양한 javascript 의 무궁무진함을 느낌
• 클라이언트의 수정, 보안, Update 를 통해 부족한 부분을 보안하며 프로젝트의 퀄리티를 높일 수 있었음
• 처음 lottie, json 을 웹페이지에 json을 사용한 영상을 삽입해보며 lottie 기술을 알게 되어 다양한 영상을 노출 할 수 있음
• 동작기능에 script 를 function 함수화하여 쉽게 동작기능을 구분 할 수 있게 코드를 짤 수 있음

🎫 Result

설문페이지	인터랙티브 팝업	결과 페이지

💡 Improvements

• 이미지 로딩 속도 개선
• javascript 동작 속도 개선
• React 라이브러리를 사용하여 json 데이터 API화 시켜 동작하기에 수월 할 것 같음