팝업 UI 디자인 작업 요청 · 1 / 3
업종코드 조회 팝업
[기관] Tech-Index > 기업·기술정보 입력 > 기업 상세 정보 > 업종코드 [조회]
- 진입 경로
- 기업 상세 정보 › 업종코드 우측 [조회] 버튼
- 사용 화면
- 개별평가 · 자가진단 · 전문가평가 3화면 공용
- 데이터 규모
- 중분류 77건 → 세분류 1,205건 (2단계 드릴다운)
- 현재 크기
- PC·모바일 모두 화면 중앙 모달 / 최대 560px
1팝업 구조
아래 캡처는 2단계(세분류) 상태 — 1단계에서는 ⑥ 푸터가 숨겨집니다
123456
| No | 영역 | 구성 요소 | 현재 적용 스펙 (변경 가능) |
|---|---|---|---|
| 1 | 헤더 | 팝업 제목 + 닫기(X) 아이콘 | 높이 68px · 제목 19px/700 · X 36×36 · 구분선 없음 |
| 2 | 안내문 | 업종 선택 기준 1줄 + [전체보기] 접기 토글(3줄) | 배경 #f6f7f9 · 본문 13px/1.55 · 토글 12.5px/700 #2563eb |
| 3 | 단계 표시 | 1단계 “중분류” / 2단계 ‹ 뒤로 + 현재 중분류명 + “세분류” | 높이 43~54px · 뒤로 버튼 pill #eef2f7 · 텍스트 13px |
| 4 | 검색 | 검색어 입력 + [검색] + [초기화] | 입력 46px/R10 · [검색] #2563eb · [초기화] 흰 배경 고스트 |
| 5 | 목록 | 행 = 라디오(2단계) 또는 › (1단계) + 업종명 + 코드 | 행 최소 58px · 이름 15px/600 · 코드 12.5px #8a8f98 · 행 사이 1px 구분선 |
| 6 | 푸터 | [선택] 버튼 — 2단계에서만 노출 | 풀폭 50px/R10 · 활성 #2563eb / 비활성 #d7dae0 |
⚠️ 1단계에는 푸터가 없습니다. 중분류는 “선택”이 아니라 “다음 단계로 들어가는” 행이라 우측에 › 만 표시하고, 하단 [선택] 버튼 영역 자체를 숨깁니다(빈 띠가 남지 않도록).
2케이스별 상태 — 디자인이 필요한 화면
총 9케이스 · 각 상태마다 시안 필요
C11단계 · 중분류 목록
기본
발생 조건 · 팝업을 처음 열었을 때
중분류 77건. 행 우측 › 로 “더 들어간다”를 표시하고 라디오는 없습니다. 하단 [선택] 영역 미노출.
디자인 포인트 · “선택하는 목록”이 아니라 “이동하는 목록”임이 한눈에 구분되어야 합니다.
C2안내문 펼침
토글
발생 조건 · [전체보기] 클릭
기본은 1줄만 보이고, 펼치면 3줄 전체가 나옵니다. 다시 누르면 [접기]로 라벨이 바뀌며 접힘.
디자인 포인트 · 접힘/펼침 두 상태 모두 필요. 화살표 아이콘 180° 회전.
C3검색 결과
조회
발생 조건 · 검색어 입력 후 [검색] 또는 Enter
현재 단계 목록 안에서만 조회합니다. 결과 건수만큼 목록 높이가 줄어듭니다(모달이 짧아짐).
디자인 포인트 · 결과가 적을 때 모달 높이가 콘텐츠에 맞춰 줄어드는 형태입니다.
C42단계 · 세분류 목록
전환
발생 조건 · 1단계 행 클릭
상단에 ‹ 뒤로 + 선택한 중분류가 표시되고, 행 왼쪽에 라디오가 생기며 하단 [선택] 버튼 영역이 나타납니다.
디자인 포인트 · 1단계 → 2단계에서 행 구조와 푸터 유무가 함께 바뀝니다.
C5선택 상태
활성
발생 조건 · 세분류 행 클릭
선택 행은 배경·라디오·텍스트가 강조되고 [선택] 버튼이 활성화됩니다. 같은 행을 다시 누르면 해제(=비활성 복귀).
디자인 포인트 · 비활성 → 활성 두 상태와, 선택 행/미선택 행 대비가 필요합니다.
C6결과 없음
빈 상태
발생 조건 · 검색 결과 0건
목록 자리에 안내 문구만 남습니다(보조 문구 1줄 포함). 모달이 크게 줄어듭니다.
디자인 포인트 · 빈 상태 전용 일러스트/아이콘 사용 여부를 정해 주세요.
C7다크 모드
Dark
발생 조건 · 사이트 다크 모드 ON
사이트 전역 다크 테마를 따릅니다. 배경 #1e1e1e / 포인트 #93aeff 계열.
디자인 포인트 · 라이트와 동일 케이스 전부가 다크에서도 성립해야 합니다.
C8모바일 · 태블릿
390px
발생 조건 · 화면 폭 768px 이하
바텀시트가 아니라 PC와 동일한 중앙 모달입니다. 좌우 여백 16px, 최대 높이 화면 - 32px.
디자인 포인트 · 작은 폭에서 검색행(입력+버튼 2개) 줄바꿈 처리 확인 필요.
C9세분류 없는 중분류
방어
현재 더미 데이터로는
재현되지 않는 방어 화면입니다.
캡처 없음 — 문구/레이아웃만 정의
재현되지 않는 방어 화면입니다.
캡처 없음 — 문구/레이아웃만 정의
발생 조건 · 중분류에 하위 코드가 없을 때
“이 업종으로 선택” 폴백 안내가 목록 자리에 뜹니다. 현재 더미 데이터(1,205건)에서는 도달하지 않습니다.
디자인 포인트 · 코드 개편 대비 방어 화면 — 시안은 후순위로 두셔도 됩니다.
캡처는 현재 퍼블리싱된 화면이며, 색·여백·타이포는 모두 조정 대상입니다. 반면 케이스 구성(어떤 상태가 존재하는지)과 동작 규칙은 확정이므로 상태를 빠뜨리지 않는 것이 중요합니다.
3상태 변화 흐름
사용자 조작에 따른 화면 전환
팝업 열기
1단계 중분류 77건
›
중분류 행 클릭
2단계로 진입 · ‹ 뒤로 노출
›
세분류 행 클릭
라디오 선택 → [선택] 활성
›
[선택]
업종코드 입력칸에 “코드 · 업종명” 적용
해제 · 선택한 행을 다시 누르면 선택이 풀리고 [선택]이 비활성으로 돌아갑니다.
검색·초기화 · 검색은 [검색]/Enter 로만 반영되고, [초기화]는 검색어만 지웁니다(단계는 유지).
닫기 · 헤더 X · ESC · 배경 클릭. 저장하지 않고 닫으면 선택값은 버려집니다.
4디자인 작업 범위
산출물 기준
| 구분 | 항목 | 필요 산출물 | 비고 · 제약 |
|---|---|---|---|
| 필수 | 1단계 / 2단계 목록 행 | 행 컴포넌트 2종(› 형 · 라디오 형) | 기본 / hover / 선택 / 포커스 4상태 |
| 필수 | [선택] 버튼 | 활성 · 비활성 2종 | 2단계에서만 노출. 1단계는 푸터 영역 자체가 없음 |
| 필수 | 빈 상태(결과 없음) | 안내 화면 1종 | 본문 + 보조 문구 2줄 구조 |
| 필수 | 안내문 아코디언 | 접힘 · 펼침 2종 | 토글 라벨 [전체보기] ↔ [접기] |
| 필수 | 단계 표시(브레드크럼) | 1단계 · 2단계 2종 | 2단계는 ‹ 뒤로 + 중분류명 노출 |
| 필수 | 검색 영역 | 입력 기본 / 포커스 / 버튼 2종 | [검색] 주 버튼 · [초기화] 보조 버튼 |
| 필수 | 다크 모드 | 위 전 케이스의 다크 버전 | 사이트 전역 다크 팔레트 준수 |
| 필수 | 모바일(≤768px) | 중앙 모달 축소형 | 바텀시트 금지 — PC와 동일 형태 유지 |
| 선택 | 세분류 없는 중분류 폴백 | 안내 + 대체 선택 화면 | 현재 미도달 · 후순위 |
공통 유의사항
- 세 팝업(업종코드 · 기술분류 · 기업정보 불러오기)은 같은 화면 안에서 연달아 쓰이므로 통일된 규격이 필요합니다. 헤더·버튼·목록 행·빈 상태는 공통 컴포넌트로 잡아 주세요.
- 모바일·태블릿도 중앙 모달입니다(바텀시트 폐지 확정). 화면 폭이 좁아지면 여백과 글자만 줄어듭니다.
- 다크 모드는 필수입니다. 사이트 전역 테마(배경 #1e1e1e / 텍스트 #e0e0e0 / 포인트 #93aeff)를 따릅니다.
- 필터·검색은 [조회]/[검색] 버튼 또는 Enter 로만 반영됩니다(입력 즉시 반영 아님). 버튼 위계가 드러나야 합니다.
- 치수·색·타이포는 전부 조정 가능합니다. 다만 케이스 구성과 상태 전환 규칙은 확정된 기획이라 변경 시 별도 협의가 필요합니다.
작성일 2026-09-16 · 기준 파일 js/industry-code-popup.js · 화면 캡처는 현재 퍼블리싱된 실제 구현 상태입니다.