PinkShop,
PinkShop - 디자인과 기능성이 만나는 곳※ 사진을 누르시면 확대되어 보실수 있습니다.
OverView.
핑크숍(Pinkshop)은 Next.js 와 TypeScript 를 기반으로 개발된 온라인 쇼핑몰 웹사이트입니다. 프로젝트는 현대적인 웹 개발 기술을 활용하여 사용자 경험(UX)과 성능을 최적화하는 것을 목표로 합니다. UI/UX는 Figma 를 통해 디자인되었으며, 코드로 구현하여 반응형 웹 디자인과 크로스 브라우징을 지원합니다. 또한, Next.js의 서버 사이드 렌더링(SSR) 기능을 활용해 SEO 성능을 강화했으며, Vercel 을 통해 배포하여 빠르고 안정적인 서비스를 제공합니다. 핵심 기능으로는 챗봇기능, 장바구니 시스템, 사용자 추천 서비스 모바일 우선(Mobile-first) 전략에 따라 다양한 기기에서 최적화된 사용자 경험을 제공합니다. 특히, Figma 디자인을 실제 웹 페이지로 구현하는 과정에서 디자인의 퀄리티를 유지하면서도 성능을 최적화하는 데 중점을 두었습니다.
Project Results.
핑크숍 프로젝트는 Figma 기반의 디자인을 정교하게 코드로 구현하며 퍼블리싱 역량을 강화하는 데 중점을 두었습니다. 반응형 웹 디자인을 통해 모바일, 태블릿, 데스크톱 등 다양한 기기에서 최적의 사용자 경험을 제공하며, 픽셀 완벽한 구현을 목표로 작업했습니다. 이를 통해 디자인과 기술적 구현의 균형을 맞추며 퍼블리셔로서의 종합적인 역량을 증진했습니다. Vercel 배포까지 경험하며 실제 운영 가능한 수준의 웹사이트를 완성했고, 성능 최적화와 SEO 개선을 통해 사용자 중심의 서비스를 제공했습니다.
Work Info.
- 제작 기간25.03.25 ~ 25.04.01
- 작업 환경MAC OS
- 사용 툴VSCODE
- 사용 언어Next.js, TypeScript, HTML5, CSS3
- 주요 기능챗봇, 장바구니, 사용자 추천 서비스
- 깃허브https://github.com/bp4sp4/pinkshoppingmall
- 피그마Pinkshop Design Link