[새싹X코딩온] UI/UX 웹 프론트엔드 부트캠프 과정 1주차 - 01

안녕 나의 기록지?

블로깅을 언제나 해보고 싶었지만, 막상 시작하려니 무엇을 공유하고 수집해야 할지 몰라 계속 미루게 되었다. 그러다 이번 청년취업사관학교(SeSAC) UI/UX 부트캠프 과정 4기를 시작하면서, 드디어 블로그를 통해 내 배움의 여정을 기록하게 되었다.

개강 전에 무료 강의를 제공받았을 때 많이 좌절했다. 익숙하지 않은 개념들 뿐이라 몇 번을 반복해서 들어도 머리에 입력되지 않아 불안함과 긴장감이 커졌다.

특히, 오랜 무직 상태였던 나에게는 이 과정을 통해 변화할 수 있을지에 대한 두려움이 아직 존재한다. 하지만 수업에서 배운 다양한 내용을 되짚어보며, 점차 성장할 수 있다는 믿음을 차곡차곡 쌓아갈 것이다.

SeSAC 청년취업사관학교

https://sesac.seoul.kr/

이곳에 대하여 간단하 소개를 해보자.

꿈꾸는 개발자 데뷔코스, 청년취업사관학교SeSAC

청년취업사관학교(SeSAC)는 청년들을 대상으로 실무 중심의 교육을 제공하는 취업 준비 프로그램이다. IT, 디자인, 데이터 분석 등 다양한 분야에서 실무 역량을 키울 수 있는 체계적인 커리큘럼을 운영하며, 현업에서 요구하는 최신 기술과 트렌드를 반영한 강의를 제공한다.

SeSAC의 목표는 청년들이 취업 경쟁력을 갖추고 다양한 산업 분야에서 활약할 수 있도록 돕는 것이다. 맞춤형 취업 컨설팅과 1:1 멘토링을 통해 개인별 취업 목표에 맞춘 지원을 제공하며, 실제 프로젝트를 통한 포트폴리오 제작과 기업 매칭 프로그램도 함께 운영하여 실질적인 취업 기회를 제공한다.

OT 그리고 첫 수업

1. UI와 UX의 차이

UI(User Interface)는 사용자가 눈으로 보며 조작하는 인터페이스, 즉 시각적 디자인 요소에 집중한다.
아이콘, 색상, 타이포그래피와 같은 시각적인 요소가 포함되며, 웹 디자이너들도 UI 디자이너라고 표현할 수 있다.

UX(User Experience)는 사용자가 제품이나 서비스를 사용하면서 느끼는 경험 전체를 디자인하는 개념이다. UI가 사용자에게 어떻게 보일지 고민하는 것이라면, UX는 사용자가 그것을 사용하며 어떤 감정을 느낄지를 고민한다.

예를 들어, 로그인 페이지에서 어떤 버튼이 어디에 위치하고 어떤 색상을 사용할지 결정하는 것이 UI라면, 그 버튼을 클릭할 때 사용자가 얼마나 편리하게 느끼는지가 UX라고 할 수 있다.

2. 디지털 디바이드

디지털 디바이드(Digital Divide)는 계층 간 정보통신정보기술의 접근성 차이에 따라 발생하는 격차를 의미한다.
기술이 발전함에 따라 인터넷 사용이 필수적인 사회에서, 인터넷을 자유롭게 사용할 수 있는 계층과 그렇지 못한 계층 사이의 격차가 심화되는 문제이다.
수업에서 다룬 예시로는 키오스크가 있었는데, 많은 고령층이 키오스크 사용에 어려움을 느끼고 있다. 이는 사용자가 새로운 기술에 적응하지 못할 때 경험하는 디지털 디바이드의 대표적인 사례이다.

3. 배리어 프리(Barrier-Free)

배리어 프리는 고령자나 장애인과 같이 사회적 약자들이 함께 이용할 수 있도록 장벽을 허물자는 운동을 의미한다. (출처-네이버 지식백과)
디지털 디바이드를 해소하기 위한 개념이기도 하다.

모든 사람들이 장애 없이 사용할 수 있는 디자인을 목표로 하며, 특히 휠체어를 사용하는 사람들, 시각 또는 청각 장애인들까지 포용할 수 있는 디자인이 중요한 요소로 떠오르고 있다.

예를 들어, 수업에서 배운 엘토브(ELTOV) 키오스크는 높낮이를 자동으로 조절하고, 수어(수화)와 점자로도 안내를 제공함으로써 모든 사용자가 키오스크를 편리하게 이용할 수 있게 하는 대표적인 배리어 프리 디자인의 사례이다.
(사진 출처-정보통신신문)

4. 더블 다이아몬드 프로세스

더블 다이아몬드(Double Diamond) 프로세스는 디자인 사고(Design Thinking) 방법론 중 하나로, 문제를 정의하고 해결하기 위한 구조화된 접근 방식을 제공한다.

이 프로세스는 두 개의 다이아몬드 형태로 구성되어 있으며, 각 단계에서 사고의 폭을 넓히고 좁히는 과정을 반복한다.

· Discover (문제정의) : 문제를 폭넓게 탐색하고 사용자의 진짜 문제를 파악하는 단계. 사용자 리서치와 관찰을 통해 다양한 문제와 기회를 식별한다.
· Define (문제 구체화) : 발견한 문제를 구체화하고 핵심 문제를 정의하는 단계. 문제의 우선순위를 정하고 해결해야 할 문제를 명확히 한다.
· Develop (아이디어 확산) : 다양한 해결책을 도출하고 아이디어를 확산시키는 단계. 브레인스토밍과 프로토타입 제작을 통해 여러 아이디어를 실험한다.
· Deliver (해결책 수렴) : 최종 해결책을 선택하고 실제로 구현하는 단계. 프로토타입을 테스트하고 사용자 피드백을 반영하여 최종 솔루션을 결정한다.

· Diverging (사고의 확산) : 디스커버와 디벨롭 단계에서 사고의 폭을 넓히는 과정.
· Converging (사고의 수렴) : 디파인과 딜리버 단계에서 사고를 좁혀 최종 해결책을 도출하는 과정.

5. 디자인 사고(Design Thinking)

디자인 사고는 사용자 중심의 문제 해결 방법론입니다. 사용자 입장에서 문제를 공감하고, 이를 창의적인 방법으로 해결하는 접근 방식을 강조합니다.

· Empathize (공감) : 사용자의 경험과 문제를 이해하기 위해 관찰하고 인터뷰한다.
· Define (문제 정의) : 수집한 정보를 바탕으로 해결해야 할 문제를 명확히 정의한다.
· Ideate (아이디어 도출) : 다양한 아이디어를 브레인스토밍하여 문제 해결을 위한 창의적인 솔루션을 제안한다.
· Prototype (시제품 만들기) : 아이디어를 시각화하고 실험하기 위해 간단한 프로토타입을 만든다.
· Test (테스트) : 프로토타입을 사용자에게 테스트하여 피드백을 받고, 이를 바탕으로 개선한다.

디자인 사고는 반복적인 프로세스로 이루어지며, 사용자의 피드백을 기반으로 지속적으로 수정하고 개선해 나가는 것을 목표로 한다.

수업 중 리더님이 언급하신 "시제품을 간단하게 만들고, 끊임없이 수정한다"는 디자인 사고의 핵심 원칙을 반영한 내용이었다.

앞으로?

복습의 힘은 대단하다. 수업 내용을 정리하면서 마음의 안정을 조금씩 찾은 것 같다. 앞으로 매회 수업 포스팅을 통해 배운 내용을 정리하고, 나의 성장을 직접 기록해 나갈 예정이다. 비록 아직도 두려움과 자신감 부족이 남아 있지만, 이 과정을 통해 조금씩 자신감을 되 찾고, 한 걸음씩 앞으로 나아가고자 한다.