팝업 UI 디자인 작업 요청 · 2 / 3
기술분류 조회 팝업
[기관] Tech-Index > 기업·기술정보 입력 > 기업 상세 정보 > 기술분류 [조회] — 혁신성장영위기업 분류근거
- 진입 경로
- 기업 상세 정보 › 기술분류 우측 [조회] 버튼
- 사용 화면
- 개별평가 · 자가진단 · 전문가평가 3화면 공용
- 데이터 규모
- 9개 품목분류(테마) › 31개 분야 › 240개 품목
- 현재 크기
- PC·모바일 모두 화면 중앙 모달 / 최대 640px
1팝업 구조
목록은 “분야 그룹 헤더 + 품목 카드 1단” 구조입니다
1234567
| No | 영역 | 구성 요소 | 현재 적용 스펙 (변경 가능) |
|---|---|---|---|
| 1 | 헤더 | 팝업 제목 + 닫기(X) | 높이 68px · 제목 19px/700 · 구분선 없음 |
| 2 | 안내문 | 선택 방법 2줄 (모바일·태블릿에서만 접기) | 배경 #f6f7f9 · 13px/1.55 · PC는 2줄 그대로 노출 |
| 3 | 검색 | 품목분류 드롭다운 + 검색어 + [조회] + [초기화] | 컨트롤 높이 46px/R10 · 드롭다운 190px · [조회] #2563eb |
| 4 | 건수 | 우측 정렬 “총 N건” | 13px · 목록 바로 위 |
| 5 | 그룹 헤더 | 품목분류(칩) + 분야명 + 해당 분야 건수 | 스크롤 시 상단 고정(sticky) · 칩 #eef4ff/#2563eb |
| 6 | 품목 카드 | 라디오 + 품목명 + [품목설명] 버튼 | 카드 1단 100% · 높이 58px · R10 · 선택 시 #eef4ff |
| 7 | 푸터 | [선택] 버튼 | 풀폭 50px/R10 · 활성 #2563eb / 비활성 #d7dae0 |
⚠️ 카드는 화면 폭과 무관하게 항상 1단(폭 100%)입니다. 모바일·태블릿·PC가 같은 배치로 보여야 한다는 요구로 확정된 사항이라 다단 그리드로 바꾸지 말아 주세요.
2케이스별 상태 — 디자인이 필요한 화면
총 9케이스 · 각 상태마다 시안 필요
C1기본 · 전체 목록
기본
발생 조건 · 팝업을 처음 열었을 때
240개 품목 전체. 분야 그룹 헤더가 스크롤 중 상단에 고정되어 지금 보고 있는 분야를 알려줍니다.
디자인 포인트 · 그룹 헤더가 카드 위로 겹칠 때 가려짐 없이 읽히도록 배경이 불투명해야 합니다.
C2품목분류 필터
조회
발생 조건 · 드롭다운 선택 후 [조회]
선택한 품목분류의 품목만 남습니다(예: 반도체·디스플레이 13건). 건수 표기도 함께 바뀝니다.
디자인 포인트 · 필터가 걸린 상태임이 드롭다운에서 드러나야 합니다.
C3검색 결과
조회
발생 조건 · 검색어 입력 후 [조회]/Enter
품목명 · 분야명 · 품목분류명에서 찾습니다. 결과가 줄면 모달 높이도 함께 줄어듭니다.
디자인 포인트 · 검색어와 결과의 관계가 보이도록 그룹 헤더가 함께 노출됩니다.
C4선택 상태
활성
발생 조건 · 품목 카드 클릭
선택 카드는 테두리·배경·라디오가 강조되고 하단 [선택]이 활성화됩니다. 같은 카드를 다시 누르면 해제.
디자인 포인트 · 선택 / 미선택 / hover / 포커스 4상태가 필요합니다.
C5결과 없음
빈 상태
발생 조건 · 조회 결과 0건
목록 자리에 안내 문구만 남고 건수는 0건으로 표기됩니다.
디자인 포인트 · 업종코드 팝업의 빈 상태와 같은 규격으로 맞춰 주세요.
C6[품목설명] 보조 팝업
겹침
발생 조건 · 카드의 [품목설명] 클릭
분류근거 팝업 위에 겹쳐서 설명 팝업(최대 760px)이 열립니다. 이때 아래 팝업의 선택 상태는 그대로 유지됩니다.
디자인 포인트 · 팝업 2겹 상태의 딤 처리 · 그림자 위계를 정해 주세요.
C7다크 모드
Dark
발생 조건 · 사이트 다크 모드 ON
선택 카드 #16264a · 라디오/칩 #93aeff 계열을 사용합니다.
디자인 포인트 · 그룹 헤더 배경이 투명하면 카드가 비쳐 보이므로 불투명 유지.
C8모바일 · 안내문 접힘
390px
발생 조건 · 화면 폭 768px 이하 · 기본
안내문이 첫 줄만 보이고 [전체보기] 토글이 생깁니다. 드롭다운은 한 줄을 모두 차지합니다.
디자인 포인트 · PC에는 이 토글이 없습니다(2줄 그대로 노출).
C9모바일 · 안내문 펼침
390px
발생 조건 · [전체보기] 클릭
두 번째 줄이 펼쳐지고 라벨이 [접기]로 바뀝니다. 목록 영역이 그만큼 줄어듭니다.
디자인 포인트 · 펼침 시에도 목록이 최소 몇 장은 보이도록 높이 배분이 필요합니다.
기술분류는 최대 4개까지 입력칸에 담을 수 있지만, 팝업은 한 번에 1개(라디오 단일 선택)만 저장합니다. 4개를 채우려면 팝업을 4번 엽니다 — 이미 담은 품목을 다시 고르거나 4칸이 다 찼을 때는 팝업이 닫히지 않고 안내만 뜹니다.
3상태 변화 흐름
사용자 조작에 따른 화면 전환
팝업 열기
전체 240품목 · 선택 없음
›
분류·검색으로 좁히기
[조회] 또는 Enter 로만 반영
›
품목 카드 선택
라디오 1개 · 재클릭 시 해제
›
[선택]
비어 있는 기술분류 칸에 입력 후 닫힘
보조 팝업 · [품목설명]은 선택과 무관합니다. 설명 팝업을 닫아도 선택 상태는 유지됩니다.
예외 안내 · 이미 선택한 품목 / 기술분류 4칸이 모두 찼을 때는 알림만 뜨고 팝업은 열린 채 유지됩니다.
초기화 · [초기화]는 분류·검색어를 진입 상태로 되돌립니다. 팝업을 다시 열면 선택도 초기화됩니다.
4디자인 작업 범위
산출물 기준
| 구분 | 항목 | 필요 산출물 | 비고 · 제약 |
|---|---|---|---|
| 필수 | 품목 카드 | 기본 / hover / 선택 / 포커스 | 항상 1단 · 폭 100% 고정 |
| 필수 | 그룹 헤더(분류 칩 + 분야 + 건수) | 일반 / 스크롤 고정 상태 | 카드가 밑으로 지나가므로 불투명 배경 필수 |
| 필수 | [선택] 버튼 | 활성 · 비활성 2종 | 업종코드 팝업과 동일 규격 권장 |
| 필수 | 검색 영역 | 드롭다운 + 입력 + 버튼 2종 | PC 한 줄 / 모바일은 드롭다운이 한 줄 차지 |
| 필수 | 안내문 아코디언 | 접힘 · 펼침 (모바일 전용) | PC는 토글 없이 2줄 노출 |
| 필수 | 빈 상태(결과 없음) | 안내 화면 1종 | 3개 팝업 공통 규격 |
| 필수 | [품목설명] 보조 팝업 | 겹침 상태 1종 | 본문은 장문 텍스트 — 가독성 우선 |
| 필수 | 다크 모드 | 위 전 케이스의 다크 버전 | 선택 카드 대비 확보 |
| 필수 | 모바일(≤768px) | 중앙 모달 축소형 2종(접힘·펼침) | 바텀시트 금지 |
| 선택 | 예외 안내 팝업 | 알림 팝업 문구 정리 | 중복 선택 · 4칸 초과 시 |
공통 유의사항
- 세 팝업(업종코드 · 기술분류 · 기업정보 불러오기)은 같은 화면 안에서 연달아 쓰이므로 통일된 규격이 필요합니다. 헤더·버튼·목록 행·빈 상태는 공통 컴포넌트로 잡아 주세요.
- 모바일·태블릿도 중앙 모달입니다(바텀시트 폐지 확정). 화면 폭이 좁아지면 여백과 글자만 줄어듭니다.
- 다크 모드는 필수입니다. 사이트 전역 테마(배경 #1e1e1e / 텍스트 #e0e0e0 / 포인트 #93aeff)를 따릅니다.
- 필터·검색은 [조회]/[검색] 버튼 또는 Enter 로만 반영됩니다(입력 즉시 반영 아님). 버튼 위계가 드러나야 합니다.
- 치수·색·타이포는 전부 조정 가능합니다. 다만 케이스 구성과 상태 전환 규칙은 확정된 기획이라 변경 시 별도 협의가 필요합니다.
작성일 2026-09-16 · 기준 파일 js/tech-class-popup.js · 화면 캡처는 현재 퍼블리싱된 실제 구현 상태입니다.