Cafe24 CCCV APP

CAFE24-CCCV-APP

📌 Summary

cafe24를 기반으로 제작된 쇼핑몰에 NFT상품을 등록할 수 있는 admin 웹 어플리케이션 (현재는 cafe24 스토어에서 해당 앱이 내려간 상태입니다.)

• 프로필 수정 기능 개발
• 에어드랍 목록과 NFT 발행 페이지 개발
• 사용자의 설정에 따른 페이지별 지갑 노출 범위 설정 기능 개발

🔍 Meaning

입사 후 처음으로 맡은 프로젝트로, 퍼블리싱을 중심으로 진행하면서 간단한 기능 개발을 담당했습니다.
새로운 개발 환경과 협업 프로세스를 익히는 데 집중했으며, 실무 경험을 쌓는 좋은 기회가 되었습니다.

💡 개요

CAFE24로 제작된 쇼핑몰에 NFT 상품을 등록할 수 있는 웹 어플리케이션입니다. 개발에는 Vue를 사용했으며, 주요 업무로는 간단한 기능 구현과 퍼블리싱 작업에 집중했습니다.

팝업 형태의 프로필 수정 기능 구현

사용자가 프로필 정보를 빠르고 직관적으로 수정할 수 있도록 팝업 형태의 프로필 수정 기능을 구현했습니다. 해당 기능은 화면 전환 없이 팝업 내에서 즉시 변경 사항을 적용할 수 있도록 구현하여 사용자 경험을 개선했습니다.

NFT 에어드랍 목록과 NFT발행 페이지 개발

NFT 에어드랍 목록을 통해 사용자는 수령한 NFT 내역을 확인할 수 있도록 했으며, NFT 발행 페이지에서는 사용자가 복잡한 입력 필드에도 불구하고 더 쉽게 디지털 자산을 생성할 수 있도록 UI/UX를 개선했습니다. 입력 필드가 많아 복잡하게 느껴질 수 있는 점을 고려해 입력 항목들을 Step 1, Step 2, Step 3으로 단계별로 구분하는 방식을 제안했으며, 이를 통해 사용자가 한 번에 모든 정보를 입력하지 않아도 되도록 개선했습니다. 이러한 제안으로 사용자는 각 단계별로 필요한 정보만 입력함으로써 작업의 부담을 덜 수 있었으며, 이미지 업로드 시 미리보기를 제공해 발행 전 결과물을 시각적으로 확인할 수 있게 했습니다. 이를 통해 NFT 상품의 발행과 관리가 더 직관적이고 효율적으로 이루어지도록 했습니다.

사용자의 설정에 따라 쇼핑몰의 페이지별 지갑 노출 범위를 조정하는 기능 개발

기존에 회사에서 우측 하단에 플로팅 형식으로 지갑을 구현했으며, 해당 지갑은 script로 주입되어 사용자의 쇼핑몰에 나타나도록 설계했습니다. 이 과정에서 사용자가 설정에 따라 특정 페이지에서만 지갑이 표시되도록 노출 범위를 조정할 수 있는 기능을 개발했습니다. 이를 통해 사용자는 개인정보 보호와 페이지별 맞춤형 노출이 가능해졌으며, 쇼핑몰의 개별 페이지마다 지갑의 표시 여부를 자유롭게 관리할 수 있도록 UX를 개선했습니다.

🚀 기술적 도전

• Vue.js 학습

  • 기존에 사용하던 React와는 다른 Vue.js의 구조와 작동 방식을 익혔습니다.
  • Vue의 반응형 데이터 관리 방식과 컴포넌트 구조를 학습하며, 새로운 JavaScript 프레임워크에 대한 이해도를 높일 수 있었습니다.

• Git을 활용한 협업 경험

  • 실무에서 Git을 활용한 브랜치 전략과 코드 리뷰 프로세스를 익혔습니다.
  • 팀원들과의 협업을 통해 효율적인 코드 관리 및 배포 과정을 경험할 수 있었습니다.

• NFT 및 블록체인 관련 기능 개발 경험

  • NFT 상품 등록과 같은 기능을 다루면서 블록체인 기반의 서비스 구조를 이해할 수 있었습니다.