맥락
산업용 초음파 장비 기업의 웹사이트와 제품 소개 화면을 작업했습니다. 제품의 개요·특징·제어·맞춤 사양·상세 규격을 구분하는 전용 스킨으로 후속 개선했습니다.
문제
장비마다 설명의 길이와 보유 항목이 다릅니다. 긴 자유 형식 본문만으로는 제품을 비교하기 어렵고, 비어 있는 맞춤 사양 칸은 화면 균형을 흐트러뜨립니다.
내린 결정
제품 정보를 항목별로 구조화
Overview·Features·Control·Customization·Specifications를 분리하고 제품 타입과 규격 태그를 연결했습니다.
없는 항목에 맞춰 배치 조정
Customization 내용이 없으면 Specifications를 Control 옆에 배치하도록 분기했습니다.
PC와 모바일의 읽는 순서 정리
PC에서는 두 열, 모바일에서는 한 열로 읽도록 제품 상세 레이아웃을 조정했습니다.
내가 맡은 범위
- 산업장비 기업 웹사이트
- 제품 상세 스킨
- 사양·특징 데이터 표시
- 조건별 화면 배치
- 반응형 제품 정보 UI
실제 산출물
- 제품 전용 product2 스킨
- 사양별 출력과 조건부·반응형 상세 레이아웃
수행 범위와 확인 기준
제품 전용 product2 스킨
제품 전용 스킨과 수정 이력에서 확인한 구현 범위입니다. 후속 스킨 변경의 현재 운영 적용 여부를 구현 완료와 동일하게 표기하지 않습니다.
이런 일이 필요하시면
지금 막힌 지점을 그대로 적어 보내주세요. 제가 할 수 있는 일과 없는 일을 먼저 구분해 답장드립니다.