m.pregoi.com — 온보딩 스텝 가이드: 연결선과 원형 아이콘 시각 연결

상태: 반영됨 — StepIndicator를 옵션 B(각 스텝 열 안에서 왼쪽 flex-1 선 | 원 | 오른쪽 flex-1 선)로 재구성. 배포는 별도.
범위: Prego apps/admin-web — 홈 온보딩 마법사 상단 스텝 인디케이터 (StepIndicator).
참고 스크린: Account Setup → Company Profile → Activate (3단계 요약 UI).

1. 배경 / 문제

항목	내용
현상	각 단계의 번호(또는 완료 체크) 원형 dingbat과 단계 사이 수평 연결선 사이에 눈에 띄는 공백(대략 10~15px 수준으로 관찰)이 있어, 선이 원과 끊어진 것처럼 보임.
기대	연결선이 원의 가장자리와 맞닿거나 광학적으로 이어지는 하나의 경로로 읽히도록 할 것 (미니멀 스테퍼 UX 관례).
영향	순수 시각·인지 품질. 기능·API·Zuplo·테넌트 로직과 무관.

2. 목표 (수용 기준)

시각 연속성
- 활성/비활성/완료 상태 모두에서, 인접한 두 원 사이의 가로 구간이 공백 없이 또는 의도된 1px 이하 수준으로 원과 연결된 것처럼 보일 것.
- 세로 정렬: 선의 수직 중심이 원의 지름 중심선과 일치할 것 (현재意도 유지).
반응형
- 좁은 뷰포트(모바일)에서도 동일 원칙 유지 — 선이 원에서 떨어져 “떠 있는” 느낌이 나지 않을 것.
- md: 브레이크포인트에서 원 크기(size-8 → size-10) 변경 시에도 비율이 깨지지 않을 것.
접근성
- 연결선은 장식 요소로 유지; 스크린 리더에 불필요한 노이즈 없음 (기존 aria-hidden 등 패턴 유지).
- 색 대비: 활성(프리고 그린)·비활성(그레이)·다크 모드 기존 토큰과 충돌 없이 조정.
회귀 방지
- 스텝 개수·라벨·완료 시 체크 아이콘 동작은 변경하지 않음 (본 기획은 레이아웃·시각만).

3. 원인 (과거 레이아웃)

이전 StepIndicator는 다음 구조였다:

각 스텝: flex-1 열 안에서 원을 가로 중앙에 배치.
스텝 사이: 별도 flex-1 커넥터 열에 h-0.5 w-full 선만 존재.

원이 속한 열의 남는 좌우 여백과 커넥터 열의 시작점이 맞지 않아 원과 선 사이에 시각적 갭이 생겼다.

4. 구현 방향 후보 및 채택

채택: 옵션 B — 각 스텝을 하나의 flex-1 열로 두고, 상단 행을 [왼쪽 선 또는 빈 flex-1] | [원, z-10] | [오른쪽 선 또는 빈 flex-1]로 구성. 인접 열 경계에서 선 세그먼트가 맞닿아 끊김이 없다. 구간 색은 기존과 동일하게 왼쪽 스텝이 completed이면 프리고 톤, 아니면 그레이 (connectorClassBetween).

과거 후보 표 (참고):

옵션	요지	장점	주의
A. 커넥터 음수 마진 / 너비 보정	커넥터 또는 선에 수평 `margin`을 당겨 원 방향으로 확장	변경 범위 최소, 파일 1곳 집중	과도 시 옆 라벨과 겹침 가능 — `min-w`·오버플로우 확인
B. 행 구조 재배치 (그리드/세그먼트)	“반쪽 선 + 원 + 반쪽 선”을 한 행의 논리 단위로 묶어, 선이 원 반지름 지점에서 끊기게 설계	수학적으로 갭 제어 용이	마크업·클래스 변경량 다소 증가
C. 원/컨테이너 `::before`·`::after`	원 래퍼에 가상 요소로 선을 뻗어 인접 셀과 만나게 함	DOM 추가 없음 가능	유지보수·다크 모드 색 상속 명확히
D. 단일 SVG 경로	세 원과 가로선을 하나의 SVG로 그림	픽셀 퍼펙트에 유리	스텝 수 가변 시 로직 복잡도 증가 (현재 3단계 고정이면 현실적)

(당초 권장은 A→B였으나, B로 바로 적용함.)

5. 작업 범위 (예상 터치 포인트)

구분	경로
주	`apps/admin-web/components/ui/StepIndicator.tsx`
검토	`apps/admin-web/app/page.tsx`에서 `StepIndicator` 사용부 (props 변경 불필요 예상)
비범위	`apps/admin-web/index.html` 등 레거시 정적 마법사 (본 기획은 Next 앱 우선; 정적 HTML 동기화는 제품 요청 시)

6. 검증 체크리스트

Chrome / Safari / Firefox — 모바일 너비(예: 375px) 및 태블릿.
라이트 / 다크 모드 — 연결선·원 테두리 색 일관성.
스텝 1 활성 / 2 활성 / 3 활성 및 완료 체크 상태에서 선 색·형태 확인.
pnpm --filter prego-admin-web run lint 통과.

7. 관련 문서

m.pregoi.com admin-web UX — implementation note — 온보딩 레이아웃·모바일 카드 등 맥락.
m company profile · footer/cookie — 동일 호스트 UI 정리 맥락 (본 이슈와 독립).
Onboarding, provisioning, logpath, admin console — admin-web 온보딩·trace 맥락.

본 문서는 사용자 제공 스크린을 바탕으로 작성됨. PR/릴리스 시 브라우저 스모크로 §6 미체크 항목을 확인할 것.