BAUSCHLOMB LENSLY

📄 프로젝트 개요

LENSLY는 고객이 다양한 렌즈를 쉽게 탐색하고 구매할 수 있도록 돕는 전자상거래 플랫폼입니다.
컬러렌즈와 일반 렌즈에 관한 정보를 제공하고, 사용자에게 렌즈 착용 예시와 고화질 이미지를 통해 최적의 제품을 추천하도록 설계되었습니다.

URL : BAUSCHLOMB LENSLY

[기간]

2023.03 ~ 2023.12 ( 10개월 )

[목표]

BAUSCHLOMB 전자상거래 플랫폼 LENSLY 구축.

[역할]

매장리스트 API 연동 및 검색 기능 개발.
검색엔진 최적화(SEO) 및 웹 접근성을 향상시켜 사용자 경험 개선.
LENSLY 퍼블리셔.

[기여도]

내부 개발팀 총 4명 중 약 30% 기여. ( 퍼블리싱 파트 : 50% )

[활동내용]

API 연동 및 검색 기능 구현: 매장리스트 API를 활용하여 사용자가 쉽게 매장을 검색하고 필터링할 수 있도록 검색 기능을 개발.
SEO 최적화: 사이트의 검색 엔진 가시성을 향상시키기 위해 메타태그 최적화 및 페이지 구조 개선을 진행. 검색 결과에서 사이트가 더 높은 순위에 오르도록 하여 사용자 유입을 증가시켰습니다.
웹 접근성 향상: WCAG(Web Content Accessibility Guidelines) 표준을 준수하여 모든 사용자가 편리하게 사이트를 이용할 수 있도록 웹 접근성을 개선. 특히, 화면 리더 지원 및 키보드 내비게이션을 강화.
퍼블리셔 역할: LENSLY의 디자인 요소 및 콘텐츠를 웹에서 구현하고, 사이트의 반응형 UI를 설계하여 다양한 디바이스에서 최적화된 사용자 경험을 제공.

[주요기능]

1. 제품 탐색 및 필터링

렌즈 색상, 스타일, 브랜드 등으로 제품을 필터링하여 사용자 맞춤형 쇼핑 제공.
고화질 이미지 및 착용 예시 제공.

2. 고객 리뷰 및 평점

제품에 대한 사용자 리뷰와 평점을 통해 신뢰도 있는 구매 환경 제공.

3. 렌즈 관련 정보 제공

렌즈 착용법과 관리 팁을 제공하여 사용자 교육.

4. 회원 전용 혜택

신규 회원 할인과 구매 시 적립 포인트 제공.

5. 편리한 결제 시스템

다양한 결제 옵션 및 안전한 결제 절차 제공.

6. SEO 최적화

메타 태그 최적화 및 콘텐츠 개선을 통해 검색 엔진 가시성 향상.

[사용된기술]

1. React

컴포넌트 기반 구조로 UI 설계하여 유지보수와 확장성 향상.

2. CSS3

반응형 웹 디자인: Flexbox 및 Grid 시스템을 활용하여 다양한 화면 크기에 맞춰 디자인을 최적화 했습니다.

3. RESTful API

서버와의 데이터 연동을 통해 동적이고 실시간으로 업데이트되는 콘텐츠 제공.

4. Redux & Redux-Saga

Redux: 전역 상태 관리를 위해 Redux를 사용하여, 애플리케이션 내의 데이터를 효율적으로 관리했습니다. 컴포넌트 간 데이터 공유를 쉽게 구현하고, 애플리케이션의 상태를 예측 가능한 방식으로 처리할 수 있었습니다.
Redux-Saga: 비동기 작업 처리 및 사이드 이펙트 관리에 Redux-Saga를 도입하여, API 호출과 같은 비동기 작업을 더 깔끔하고 유지보수하기 쉬운 코드로 구현했습니다.

5. 카카오 지도 API

위치 기반 서비스: 카카오 지도 API를 사용하여 사용자가 매장 위치를 쉽게 찾을 수 있도록 구현하였습니다.

6. 디자인 툴

Figma: 디자이너와의 협업을 통해 UI/UX 프로토타입 제작.

[성과]

유지보수 3년 계약.
통합 Admin 개발 계약. ( 2024년 진행중 )

[느낀점]

1. 카카오 지도 API 적용하여 Lensly Store List 연동하여 검색기능 구현

문제 설명

사용자가 원하는 매장을 쉽게 찾을 수 있도록 지도를 연동한 검색 기능이 필요했습니다. 카카오 지도 API를 사용하여 지도와 매장 정보를 연동하는 방식에 어려움이 있었습니다.

해결 방법

카카오 지도 API를 활용해 매장 목록을 지도에 표시하고, 사용자가 매장 위치를 검색할 수 있도록 지도 위에 매장 리스트를 연동하였습니다. 이를 통해 매장 검색 기능이 사용자 친화적이고 직관적으로 개선되었습니다.

2. React 프로젝트에서 로그인 페이지 구현