플러스프로젝트 배경
- SVG 일러스트레이션 8종 커스텀 구현 (선인장, 야자수, 태양, 달, 새, 산맥, 아치)
- 이미지 용량 90% 절감 (벡터 그래픽 활용)
- 5개 섹션 완성 (Hero, About, Coffee x2, Products, Contact)
- Rails 8 최신 스택 적용 (Solid Cache/Queue/Cable, Kamal)
프로젝트 성과
빈티지 인더스트리얼 디자인 시스템
Grunge 텍스처, Sepia 필터, 빈티지 타이포그래피 등 브랜드 아이덴티티에 맞는
커스텀 CSS 구현
커스텀 CSS 구현
이미지 최적화 17장
WebP 포맷으로 변환하여 평균 70% 용량 절감. 대표이미지, 내부, 메뉴, 리뷰 이미지
포함
포함
핵심 기능
Grunge 텍스처 오버레이
SVG 기반 fractalNoise 필터로 낡은 창고 느낌의 텍스처 생성, 모든 섹션에 일관되게 적용
반응형 갤러리 그리드
CSS Grid로 구현한 Masonry 스타일 갤러리, 이미지별 tall/wide
레이아웃 변형
레이아웃 변형
진행 단계
기획
2025.03.
성수동 빈티지 창고 카페 컨셉 분석, 브루클린 인더스트리얼 스타일 레퍼런스 수집, 사이트맵 설계
디자인
2025.03.
5색 브랜드 팔레트(Brown, Cream, Dark, Rust, Sand) 정의, Grunge 텍스처 및 빈티지 필터 CSS 개발,
개발
2025.03.
Tailwind CSS + Vanilla JS로 5페이지 구현, AOS 스크롤 애니메이션, 갤러리 Lightbox 기능
배포
2025.03.
Dockerfile 작성, Kamal 배포 설정, Python HTTP Server 로컬 테스트 환경 구성
프로젝트 상세
- SVG 일러스트레이션 8종 커스텀 구현 (선인장, 야자수, 태양, 달, 새, 산맥, 아치)
- 이미지 용량 90% 절감 (벡터 그래픽 활용)
- 5개 섹션 완성 (Hero, About, Coffee x2, Products, Contact)
- Rails 8 최신 스택 적용 (Solid Cache/Queue/Cable, Kamal)
