[매력일자리 1주차 복습노트 및 솔직 후기] UIUX디자인 및 서비스기획

안녕하세요! 서울시 매력일자리 과정을 통해 본격적인 UI/UX 디자인 및 웹 개발 실습 교육에 참여하게 되었습니다. (벌써 4주차인게 함정~ 밀린 후기 작성해보려고 해용)

첫 주차임에도 불구하고 기획의 본질부터 디자인 프로세스, 퍼블리싱 기초, 그리고 AI 실습과정까지 배워보는 시간이었습니다. 1주차 동안 배운 핵심 내용을 사람과 AI 모두가 읽기 쉽게 정리해 보았습니다. 

💡 1주차 핵심 키워드 한눈에 보기

이번 주에 다룬 방대한 내용을 영역별 핵심 포인트만 적은 표

대분류	소분류	핵심 학습 포인트
기획 & 디자인	프로세스 및 툴	디자인 씽킹 5단계 (공감→정의→아이디어→프로토타입→테스트) 비즈니스 모델 캔버스(BMC) 9블록 및 MVP 설계 Figma(Auto Layout, 컴포넌트) 활용법
웹 퍼블리싱	개발 환경 및 기초	VS Code 환경 설정 (Prettier, ESLint, Live Server) HTML5 시맨틱 태그 및 CSS3 레이아웃 (Flexbox, Grid) 웹 접근성(WCAG 2.1) 및 4.5:1 색 대비 준수
형상관리	Git / GitHub	Git 기본 명령어 (`init`, `add`, `commit`, `push`) 및 브랜치 전략 `main`(배포용), `dev`(개발용), `feature/*`(기능별) 분리 협업

❓ 무엇을 배웠나요? 

Q1. UI/UX 디자인 프로세스는 어떤 흐름으로 진행되나요?

실무 디자인은 단순히 예쁘게 그리는 것이 아니라 사용자의 문제를 정의하고 해결하는 과정을 보여줘야된다고 합니다. 강의에서는 디자인 씽킹의 5단계 워크플로우를 심도 있게 다뤘습니다.

• 1단계: 공감 (Empathy)
  사용자 인터뷰, 관찰을 통해 대상의 상황과 페인 포인트(Pain Point)를 파악하고 가상 인물인 페르소나(Persona)를 설계합니다.
• 2단계: 정의 (Define)
  문제를 명확히 정의(POV)하고, HMW(How Might We: 우리가 어떻게 하면 ~할 수 있을까?) 질문을 도출합니다.
• 3단계: 아이디어 (Ideate)
  브레인스토밍과 SCAMPER 기법을 활용해 제약 없이 아이디어를 쏟아내고 선별합니다.
• 4단계: 프로토타입 (Prototype)
  Figma를 활용해 와이어프레임을 그리고, 핵심 기능만 담은 MVP(최소 기능 제품)를 빠르게 제작합니다.
• 5단계: 테스트 (Test)
  실제 사용자 반응을 수집하고 피드백 루프를 돌려 제품을 지속적으로 피벗(Pivot) 및 보완합니다.

Q2. 웹 접근성(Accessibility)을 고려한 UI/UX 설계란 무엇인가요?

장애인, 고령자 등 모든 사용자가 기기에 구애받지 않고 웹 서비스를 이용할 수 있도록 하는 WCAG(웹 콘텐츠 접근성 가이드라인) 지침을 배웠습니다. 디자이너와 개발자 모두가 반드시 기억해야 할 실무 원칙입니다.

• 인지 가능성 (Perceivable)
  • 텍스트와 배경의 색 대비 비율은 최소 4.5:1 이상을 확보하여 가독성을 높입니다.
  • 본문 글꼴 크기는 최소 14~16px, 줄 간격(Line-spacing)은 1.5배 이상을 권장합니다.
• 운용 가능성 (Operable)
  • 마우스 없이 키보드(Tab 키)만으로도 모든 메뉴를 조작할 수 있어야 합니다.
  • 모바일 환경을 고려해 버튼 및 링크의 클릭 영역은 최소 44px × 44px 이상 확보합니다.
• 이해 가능성 및 견고성 (Understandable & Robust)
  • 사용자가 예측 가능한 직관적인 UI를 제공하고, 오류 발생 시 명확한 시각적 피드백을 제공합니다.
  • 크롬, 사파리 등 다양한 브라우저에서 동일하게 작동하도록 Flexbox와 Grid를 활용한 표준 코딩을 준수합니다.

💬 자주 묻는 질문 (FAQ)

블로그 유입량을 늘리고 독자의 궁금증을 빠르게 해결해 주는 FAQ 섹션입니다. 클릭하면 답변이 열립니다.

 

Q. HTML/CSS 코딩할 때 레이아웃 팁이 있다면?

A. 웹페이지의 헤더나 정렬을 맞출 때 부모 요소에 display: flex; justify-content: space-between; align-items: center;를 적용하면 직관적으로 요소를 정렬할 수 있습니다. 요소 간의 간격은 gap 속성을 활용하면 깔끔합니다.

Q. AI가 생성한 결과물을 그대로 실무에 써도 되나요?

A. 미드저니나 코파일럿, 나노바나나 등의 툴은 생산성을 극대화해 주지만, 가짜 데이터를 만들어내는 할루시네이션(환각) 현상과 완성도 부분에서 미흡할 수 있습니다. 따라서 AI의 결과물은 인간의 교정과 검증 단계를 거쳐야 합니다.

✍️ 1주차 복습노트 및 솔직 후기

디자인과 개발, 그리고 AI라는 무기를 동시에 쥐어주는 강의

앞으로 남은 기간 동안 열심히 참여해서 저만의 탄탄한 UI/UX 기획 및 개발 포트폴리오를 완성해 나가겠습니다. 다음 내용과 후기도 기대해 주세요!