플러스프로젝트 배경
1) 문제점
기존 청첩장 서비스들은 정적인 디자인과 제한된 기능으로 인해 사용자 맞춤성이 떨어지고,
고화질 이미지 지원이 부족하여 모바일 환경에서 시각적 품질이 낮았으며,
관리자 입장에서 일괄적인 운영 및 만료 처리 등 관리 효율성이 부족했습니다.
2) 프로젝트 목표
- 현대적인 웹 기술 기반의 사용자 중심 디자인 도입
- 소셜 로그인 및 고화질 이미지 지원을 통해 편의성과 시각적 완성도 강화
- 청첩장 공유, 알림톡, 운영 자동화, CMS 구축 등을 통해 사용자와 관리자의 경험 모두 향상
3) 주안점
- Next.js 기반의 SSR 구조로 빠른 페이지 로딩과 SEO 최적화
- 네이버 소셜 로그인 연동을 통한 간편한 사용자 인증
- 고화질 이미지 최적화 로직을 적용하여 시각적 품질 유지와 트래픽 절감 동시 달성
- 청첩장 공유 및 알림톡 기능으로 사용자 간 소통 기능 강화
- 자동 만료 처리 로직으로 서비스 운영 자동화 구현
- 관리자 전용 CMS 시스템 구축으로 전반적인 콘텐츠 및 사용자 관리 용이
- AWS(EC2, S3, RDS), Cloudflare, Route53, Lightsail 등 인프라 구성을 통해 안정적인 서비스 운영
기존 청첩장 서비스들은 정적인 디자인과 제한된 기능으로 인해 사용자 맞춤성이 떨어지고,
고화질 이미지 지원이 부족하여 모바일 환경에서 시각적 품질이 낮았으며,
관리자 입장에서 일괄적인 운영 및 만료 처리 등 관리 효율성이 부족했습니다.
2) 프로젝트 목표
- 현대적인 웹 기술 기반의 사용자 중심 디자인 도입
- 소셜 로그인 및 고화질 이미지 지원을 통해 편의성과 시각적 완성도 강화
- 청첩장 공유, 알림톡, 운영 자동화, CMS 구축 등을 통해 사용자와 관리자의 경험 모두 향상
3) 주안점
- Next.js 기반의 SSR 구조로 빠른 페이지 로딩과 SEO 최적화
- 네이버 소셜 로그인 연동을 통한 간편한 사용자 인증
- 고화질 이미지 최적화 로직을 적용하여 시각적 품질 유지와 트래픽 절감 동시 달성
- 청첩장 공유 및 알림톡 기능으로 사용자 간 소통 기능 강화
- 자동 만료 처리 로직으로 서비스 운영 자동화 구현
- 관리자 전용 CMS 시스템 구축으로 전반적인 콘텐츠 및 사용자 관리 용이
- AWS(EC2, S3, RDS), Cloudflare, Route53, Lightsail 등 인프라 구성을 통해 안정적인 서비스 운영
프로젝트 성과
이미지 캐싱 처리로 서버 비용 90% 이상 감소
웨딩 사진 특성상 고화질 이미지, 영상, 음원을 호스팅하다보니 트래픽 비용이 많이 나오는 이슈가 있었습니다. 앞단에 CDN을 구축하여 트래픽 비용 90% 이상 감소와 주말 낮시간 페이지 로딩 속도를 개선하였습니다.
핵심 기능
스마트스토어 실시간 구매 체크
스마트스토어 API를 사용하여 사용자가 구매 시 워터마크 및 관리자에서 실시간으로 확인할 수 있도록 구축하였습니다.
SEO 작업 및 알림톡 작업
기본 SEO설정 작업과 사용자별로 SEO를 설정할 수 있도록 개발하였습니다.
또한 알림톡을 사용해 카카오나 링크로 공유할 수 있도록 개발하였습니다.
또한 알림톡을 사용해 카카오나 링크로 공유할 수 있도록 개발하였습니다.
AWS 서버 셋팅 및 CDN 서버 구축으로 비용 절감
웨딩 사진 특성상 고화질 이미지, 영상, 음원을 호스팅하다보니 트래픽 비용이 많이 나오는 이슈가 있었습니다. 앞단에 CDN을 구축하여 트래픽 비용 90% 이상 감소와 주말 낮시간 페이지 로딩 속도를 개선하였습니다.
진행 단계
기획 및 요구사항 정의
2021.09.
기존 청첩장 서비스들의 문제점을 분석하고, 사용자 중심의 기능 및 디자인 요구사항을 정리하였습니다.
주요 기능으로는 소셜 로그인, 고화질 이미지 지원, 알림톡, 자동 만료 처리, 관리자 CMS 등이 포함되었습니다.
주요 기능으로는 소셜 로그인, 고화질 이미지 지원, 알림톡, 자동 만료 처리, 관리자 CMS 등이 포함되었습니다.
UI/UX 디자인 및 와이어프레임 제작
2021.09.
화면 흐름도 및 기능 흐름도를 작성하고, 관리자와 사용자 화면을 구분하여 와이어프레임을 제작하였습니다.
모바일 사용자 중심의 UX를 고려한 구성으로 설계하였습니다.
모바일 사용자 중심의 UX를 고려한 구성으로 설계하였습니다.
프론트 및 백엔드 개발
2021.09.
Next.js와 React를 활용하여 빠른 렌더링과 안정적인 사용자 경험을 제공하도록 개발하였습니다.
청첩장 생성/관리, 사용자 관리, 콘텐츠 통계 등을 위한 관리자 페이지를 구축하였습니다.
청첩장 생성/관리, 사용자 관리, 콘텐츠 통계 등을 위한 관리자 페이지를 구축하였습니다.
테스트 및 최적화
2021.11.
실제 사용 시나리오 기반의 테스트를 진행하여, 사용성과 안정성을 점검하였습니다.
이미지 로딩 최적화, 서버 캐싱, 트래픽 절감 전략을 적용하였습니다.
이미지 로딩 최적화, 서버 캐싱, 트래픽 절감 전략을 적용하였습니다.
배포 및 운영 인프라 구축
2021.12.
AWS EC2, S3, RDS, CloudFront, Route53 등을 활용하여 안정적인 서비스 운영 환경을 구성하였습니다.
이후에도 유지보수 및 기능 개선이 가능한 구조로 세팅하였습니다.
이후에도 유지보수 및 기능 개선이 가능한 구조로 세팅하였습니다.
프로젝트 상세
모바일 청첩장 프로젝트는 현대적인 웹 기술과 최적화된 디자인으로 개발된 사용자 중심의 서비스입니다.
프로젝트는 Next.JS를 사용하여 프론트엔드를 개발하였고, 네이버 소셜 로그인 인증 기능을 통해 사용자의 편의성을 높였습니다.
대용량 고화질 이미지 지원을 통해 청첩장의 시각적 매력을 강화하면서도 트래픽 절감 및 속도 개선을 달성하였습니다.
청첩장 공유 및 알림톡 기능을 구현하여 사용자 간 소통을 용이하게 하였으며, 청첩장의 운영 자동화(만료처리 등)를 위한 처리 로직을 구현하여 관리 효율성을 향상시켰습니다.
또한, 관리자 CMS를 구축하여 청첩장 서비스의 전반적인 관리가 용이하게 되었습니다.
이 모든 작업은 AWS(EC2, S3, RDS), MySQL(MariaDB), CSS, React, Node.js, Express, Nest.JS, Cloudflare, Route53, Lightsail, CloudFront, S3 등의 다양한 기술을 활용하여 구축되었으며, 이를 통해 청첩장 서비스의 UI/UX 디자인, 구축, 연동, 개발, 유지보수 등 전반적인 기능을 제공합니다.
프로젝트는 Next.JS를 사용하여 프론트엔드를 개발하였고, 네이버 소셜 로그인 인증 기능을 통해 사용자의 편의성을 높였습니다.
대용량 고화질 이미지 지원을 통해 청첩장의 시각적 매력을 강화하면서도 트래픽 절감 및 속도 개선을 달성하였습니다.
청첩장 공유 및 알림톡 기능을 구현하여 사용자 간 소통을 용이하게 하였으며, 청첩장의 운영 자동화(만료처리 등)를 위한 처리 로직을 구현하여 관리 효율성을 향상시켰습니다.
또한, 관리자 CMS를 구축하여 청첩장 서비스의 전반적인 관리가 용이하게 되었습니다.
이 모든 작업은 AWS(EC2, S3, RDS), MySQL(MariaDB), CSS, React, Node.js, Express, Nest.JS, Cloudflare, Route53, Lightsail, CloudFront, S3 등의 다양한 기술을 활용하여 구축되었으며, 이를 통해 청첩장 서비스의 UI/UX 디자인, 구축, 연동, 개발, 유지보수 등 전반적인 기능을 제공합니다.
