SHOPL 대시보드는 JSP와 React가 섞여 있어 "이 화면이 어떤 기술로 만들어졌는지" 파악하기 어렵습니다. 또한 "디자인시스템이 얼마나 적용되어 있는지" 확인하기도 쉽지 않습니다. 이는 기획, 디자인, 개발, QA 등 제품을 만들어나가는 과정 전반에 병목이 되기도 합니다.
Shopl Finder는 복잡한 화면 구조와 디자인 적용 현황을 하이라이팅과 라벨로 쉽게 보여주어, 기획자·디자이너·QA 등 모든 직군이 화면의 기술적 배경을 이해할 수 있게 도와주는 도구입니다.
"이 화면이 어떤 기술로 만들어졌는지" 궁금할 때 사용하는 기능입니다.
| 화면 유형 | 표시 방법 | 의미 |
|---|---|---|
| JSP 페이지 | 🟧 주황색 라벨 | 전체가 기존 기술로 개발된 화면 |
| React 페이지 | 🟦 파란색 라벨 | 전체가 최신 기술로 개발된 화면 |
| React 모달 | 🟦 파란색 영역 강조 | 기존 화면 위에 뜨는 최신 기술 팝업 |
| React 섹션 | 🟦 파란색 영역 강조 | 기존 화면 내 일부만 최신 기술 적용 |
- 기획자: 기능 개선 요청 시 개발 난이도 예상
- 디자이너: 디자인 수정 범위 파악
- QA: 버그 발생 시 담당 개발팀 확인
- 비즈니스팀: 고객 문의 대응 시 기술적 배경 이해
"이 화면에 디자인 시스템이 얼마나 적용되었는지" 확인하는 기능입니다.
- 강조 표시: 디자인 시스템이 적용된 요소 하이라이팅
- 마우스 올리기: 해당 디자인 요소의 이름 표시
- 강조 없음: 개별적으로 만들어진 디자인 요소
SHOPL Finder는 개발-비개발직군의 협업 도구이기에 디자인팀과 합의된 컴포넌트만 찾아요. 컴포넌트 개발을 위해 만들어진 아래 컴포넌트들은 제외됩니다.
Stack,Popper,StackContainer,shopl,BackDrop`
- 기획자: 사용자 경험 일관성 현황 파악
- 디자이너: 브랜드 가이드 적용률 확인
- QA: 디자인 표준 준수 여부 검토
분석이 끝난 후 화면을 원래 상태로 되돌리는 기능입니다.
- 모든 색상 강조 표시 제거
- 마우스 올릴 때 나타나는 라벨 제거
- 팝업 창 내부 요소까지 완전 정리
- 크롬 웹스토어에서 확장 프로그램을 설치합니다
- SHOPL 대시보드 페이지에 접속합니다
- 브라우저 우측 상단의 확장 프로그램 아이콘을 클릭합니다
- ⚙️ 기술 스택 찾기: 화면의 기술 구조를 색상으로 확인
- 🛍️ Shoplflow 찾기: 디자인 시스템 적용 현황을 강조 표시로 확인
- 🔄 초기화하기: 모든 분석 결과를 제거하고 원래 화면으로 복원
- 결과가 안 보일 때: 페이지 로딩 완료 후 다시 시도
- 화면이 이상할 때: 🔄 초기화하기 버튼으로 리셋 후 재시도
- 확장 프로그램이 안 보일 때: SHOPL 도메인 페이지에서만 작동하는지 확인
- 🏢 회사 내부 전용: SHOPL 대시보드에서만 사용 가능 (HADA 대시보드에도 도입 준비중)
- 🌐 지원 브라우저: Chrome에서만 사용 가능
문제 발생이나 개선 제안이 있으시면 사내 메신저를 통해 프론트엔드팀으로 연락해주세요.
- 문제가 발생한 페이지 주소
- 사용한 기능 (기술 스택 찾기/Shoplflow 찾기)
- 스크린샷 (가능한 경우)