용어 식별 — 프론트엔드 / UX·UI — 실습 Lab

INCIDENT RESPONSE

0 / 5 단계 완료

📚 PREREQUISITES

Theorysw-engineering/glossary-frontend-ux

TRACK

SW-ENGINEERING

SLA

40분

LEVEL

입문

PHASES

3단계

ENV

local

INCOMING TICKET

“팀장: "프론트 개발자는 '번들이 5MB라 모바일이 느려요', 'SSR 후 hydration이 안 맞아 화면이 번쩍여요'라 하고, 디자이너는 '디자인 시스템이 필요해요', QA는 '스크린리더로 탐색이 안 돼요'라는데 PM이 못 알아들으면 우선순위를 못 정해요. 프론트·UX/UI 용어를 증상과 짝지어 알아듣게 해주세요."”

YOUR ROLE

프론트·UX/UI 용어를 알아듣고 협업 우선순위를 정해야 하는 PM/기획/인프라 담당

안 하면 나중에

용어를 못 알아들으면 프론트·디자이너·QA의 말을 되묻느라 회의가 늘어지고, 성능·접근성 이슈의 심각도와 일정 영향을 판단하지 못한다.

📋상황 브리핑

팀장이 말합니다.

"프론트 개발자가 회의에서 '번들이 5MB라 모바일이 느려요', 'SSR 후 hydration이 안 맞아요'라 하고, 디자이너는 '버튼이 화면마다 제각각이라 디자인 시스템이 필요해요', QA는 '스크린리더·키보드로 탐색이 안 돼서 접근성 이슈예요'라는데, PM이 이걸 못 알아들으면 우선순위를 못 정해요. 프론트·UX/UI 용어를 '무슨 뜻'만이 아니라 '어떤 증상일 때 나오는 말인지'로 알아듣게 해주세요."

이 Lab은 용어를 통째로 외우는 게 아니다. 실제 증상·요청·대화 문구를 주고 "이건 무슨 용어인가"를 가려내며, 헷갈리는 짝(CSR vs SSR, FCP vs TTI, 와이어프레임 vs 프로토타입, Design System vs Token 같은)을 구분한다.

⏱ 40분📊 입문🔧 3단계#glossary#frontend#ux#ui

MISSION

프론트 코드·성능 — 증상으로 용어 가려내기

모바일 로딩·상태 꼬임·SSR 상호작용 지연 증상을 보고 Bundle, State Management, Hydration, CSR/SSR을 식별하고 헷갈리는 짝을 구분한다.

UX 설계 — 요청 문구로 용어 가려내기

"만들기 전에 검증·못 찾음·감이 아닌 데이터" 같은 요청을 보고 Wireframe/Prototype, Usability/Information Architecture, A/B Test를 식별한다.

UI·접근성 — 상황으로 용어 가려내기

제각각 UI·키보드/스크린리더 불가·다국어 확장 상황을 보고 Design System/Token, Accessibility/Semantic Markup, i18n/l10n을 식별한다.

📌 선수 지식

• [이론] sw-engineering/glossary-frontend-ux

ℹ️ 실습 환경

환경: local

🔒

실습 실행은 Pro 플랜 전용입니다

인시던트 브리프와 학습 자료는 지금 바로 확인할 수 있습니다. 실제 실습 진행 및 터미널 사용은 Pro 플랜에서 가능합니다.

Pro로 업그레이드 →

>_ LAB TERMINAL↔ 너비 조절

NOTES