컬러 문화 사전·갤러리 반응형 웹

카테고리·태그로 분류된 컬러 문화 포스트를 편집형 그리드로 탐색하고, 전체 화면 폭에 맞춰 구성이 재배치되는 반응형 홈입니다.

• Tailwind CSS 브레이크포인트 3단계와 CSS Grid auto-fill 조합으로 카드 열 수를 화면 폭에 맞춰 자동 조정
• 카테고리·태그 필터 상태를 URL 쿼리와 동기화하여 필터 결과 링크 공유 구조 설계
• 이미지 lazy loading과 srcset 기반 해상도 분기로 이미지 로딩 부담을 줄이는 구조 적용

하나의 컴포넌트 트리로 PC·태블릿·모바일 화면을 모두 대응하는 반응형 구조를 설계하고, 시안 기준 여백·타이포 값을 디자인 토큰으로 분리합니다.

단어나 키워드를 입력하면 해당 컬러 코드, 설명, 연관 자료를 한 화면에 보여주는 컬러 정보 사전 검색입니다.

• PostgreSQL tsvector와 pg_trgm 인덱스를 조합하여 한글 부분 일치 검색과 오탈자 허용 검색을 구현
• Debounce 입력과 React Query 캐싱으로 자동완성 요청 횟수를 제어하는 검색창 설계
• 컬러 코드를 HEX·RGB·HSL 3가지 표기로 전환하고 클릭 한 번으로 복사하는 견본 카드 컴포넌트 구현

컬러명, 별칭, 설명, 연관 태그를 하나의 검색 문서로 합성하여 키워드 하나로 코드·설명·연관 자료가 함께 표시되는 사전 결과 구조를 설계합니다.

첫 질문의 선택지에 따라 두 번째 질문이 동적으로 바뀌는 2단계 분기 위저드로, 마지막에 나에게 맞는 컬러 결과 페이지를 보여줍니다.

• 질문 노드와 선택지 간선을 JSON 그래프로 정의하고 선택 이력에 따라 다음 질문을 결정하는 분기 엔진 구현
• 첫 질문 선택지 4~7개를 카드형 토글로 구성하고 진행 단계 표시와 이전 단계 복귀를 지원하는 위저드 UI 설계
• 결과 페이지를 분기 경로 키로 조회하여 컬러 견본·설명·추천 포스트를 조합 표시

분기 규칙을 코드가 아닌 데이터로 보관하여, 질문과 선택지가 바뀌어도 위저드 엔진 수정 없이 동작하는 구조를 설계합니다.

카테고리별로 분류된 컬러 이미지를 필터와 카드 그리드로 탐색하고, 카드를 선택하면 퀵뷰에서 큰 이미지와 정보를 확인하는 갤러리입니다.

• CSS 컬럼 기반 메이슨리 레이아웃과 Intersection Observer 무한 스크롤로 대량 이미지 목록 탐색 구현
• 퀵뷰 드로어에서 좌우 키보드 이동과 포커스 트랩을 지원하는 접근성 설계 적용
• 카테고리 필터 칩과 정렬 옵션을 URL 쿼리에 반영하여 갤러리 상태 공유 구조 설계

이미지 원본과 리사이즈 파생본을 분리 보관하는 스토리지 인터페이스를 설계하여, 저장소를 교체해도 갤러리 화면 코드가 바뀌지 않는 구조를 적용합니다.