유데미 스타터스(STARTERS) 취업부트캠프 6기 - UI/UX디자인 1주차 학습 일지

Udemy STARTERS UI UX디자인/WIL(1~12주차)

유데미 스타터스(STARTERS) 취업부트캠프 6기 - UI/UX디자인 1주차 학습 일지

coolyoung 2023. 7. 9. 14:35

Udemy STARTERS UI/UX 디자인 시작

나는 부트캠프를 하기 전에는 코딩 교육쪽에서 일을 하고 있었고, 교육에 대한 관심도 많았기 때문에 웅진 씽크빅 인턴 연계형 부트캠프는 정말 나에게 좋은 기회라고 생각되어서 지원하게 됐다.

디자인 전공자도 아니고 관련 경험이라고 해봤자 UX 기획 스터디나 해커톤정도..? 내새울게 없는 부끄울 수준이었기에.. 큰 기대없이 준비했다.

합격 소식을 받았을 때, 이번 기회를 절대 놓쳐서는 안된다고 생각했다.

비전공자로서 남들보다 부족한게 많겠지만.. "태도"와 "간절함"으로 극복해 나아가겠다는 다짐을 했다..

중요한건 꺾이지 않는 마음이니까... 이번 기회를 꼭 잡아보고자 한다.

Ice Breaking & OT

첫날 시작은 초반에 분위기를 풀어줄 다양한 활동과 간단한 Ice Breaking 시간을 가진을 가졌다. 그 후 OT를 진행하면서 23:1 경쟁률을 들었는데, 생각보다 높아서 놀랐다. 이번 기회를 꼭 잡겠다는 다짐과 함께. 어렵게 들어온 만큼 열심히 해야겠다는 생각이 들었다.

1주차 교육시작

UX 기획

디자인 툴(포토샵, 일러스트, 피그마)

HTML/CSS

1. UX기획

핵심 내용 1 :

단순한 다양한 사용자 경험보다 하나의 뛰어난 사용자 경험이 중요하다 사용자는 콘텐츠를 원하는 것이 아닌 콘텐츠를 통한 경험이 중요하다

핵심 내용 2 :

사용자의 경험에 영향을 주는 것 - 7가지

시간의 작용
사용자는 시간에 따라 다른 경험을 하게 된다.
예시) 배달의 민족 같은 경우 점심과 저녁 야식을 주로 이용, 시간의 영향을 많이 받는 앱
과거의 경험
과거 경험을 통해 이미 익숙해져 있는 아이콘이나 텍스트를 현재에도 고수려는 경향이 있다.
예시) 과거에 사용해보니 대충 이럴것이다 -> 배달의 민족을 쓰다가 요기요를 썼을 때 대충 후기가 있을 것이고 카테고리가 이렇게 있을 것이다. 즉, 여기서도 이게 있을거라는 기대가 생김.
현재 맥락
사용자는 주어진 대상 이외에 그 대상과 함께 제시된 모든 정보에 영향을 받는다.
예시) 배달의 민족에서 햄버거를 먹고싶어서 맥도날드에 들어갔는데 갑자기 버거킹에서 50% 할인 광고가 뜨면 갑자기 버거킹으로 들어가게 되는 상황. 즉, 주변에 어떤 정보나 맥락이 있을 경우 영향을 준다. 광고 베너나 컨텐츠 등이 하나의 예시이다.
미래 기대
사용자는 자신의 행동에 따른 UI의 반응이나 결과를 기대한다.
예시) 배달의 민족에서 음식을 주문하면 음식점에서 수락해주길 기대한다. 그리고 언제올지 궁금하니 예상 배달시간과 접근하고 있는 맵 제공, 인스타그램이나 틱톡이 아주 잘 이용한 사례
시간 흐름에 따른 정보 파악
사용자는 현재의 최신 정보 뿐만 아니라 과거와 미래의 정보까지도 알고 싶어 한다.
예시) 과거 현재 미래가 연결되어 작용한다.
공간의 작용
사용자는 공간에 따른 다른 경험을 하게 된다.
예시) 지하철에 넷플릭스를 볼 때 스마트폰으로 본다. 집에서 볼 때는 tv나 노트북 테블릿 사용, 어떤 곳에 따라 사용자의 사용하는 것이 달라진다.
목적의식의 작용
사용자는 분명한 목적의식을 가지고 서비스를 사용하기도 하지만 비목적의식을 가지고 사용하기도 한다.

핵심 내용 3 :

피터모빌의 벌집 구조 - 좋은 사용자 경험을 디자인하기 위한 UX 품질 평가 7가지 지표

가치성 :
사용자들의 니즈에 얼마나 만족스러운 경험을 제공하고 있는가 ?
- 사용자들은 가치 있는 경험이길 원한다.

매력성 :
사용자들에게 감성적인 즐거움을 주고 있는가 ?
- 앱이나 서비스가 감성적으로 접근하고 있는지 - 예로들면 당근마켓(당신의 근처 마켓) 같은

접근성 :
다양한 사용자들이 쉽게 접근할 수 있는가?
- 당근마켓 - 사용자 나이대가 다양하다(10,20,30,40,50대까지)

검색성 :
사용자들이 쉽고 빠르게 원하는 정보를 찾을 수 있는가 ?
- 내가 원하는 정보를 찾을 때, 빠르게 검색해서 찾을 수 있는지

신뢰성 :
사용자들에게 얼마나 신뢰성 있는 정보를 제공하는가 ?
- 당근마켓 - 직거래를 통해 거래하다 보니 중고플랫폼 중에서 신뢰성이 높다.

사용성 :
사용자들이 얼마나 쉽게 사용할 수 있는가?
- 코로나 초창기 키오스크 사용이 급격히 증가했다. 코로나 전까지는 키오스크 사용이 어색하고 불편 했었는데 요즘은 키오스크 사용이 편해졌음.키오스크는 사용성이 중요하다.

유용성 :
사용자들이 필요로 하는 것들을 제공하고 있는가 ?
- 배달의 민족에서 주문 가능한 가게를 보여줘야하는데 준비중인 가게를 보여줌으로써 불필요한 정보를 제공할 때가 있다. 준비중인 가게를 필터링 하여 주문 가능한 가게를 보여주게 하는 유용성을 제공 필요.

핵심 내용 3 :

사용자들의 경험을 구성하는 6가지 요소

1. 동기(Motive)
사용자가 서비스를 이용하는 이유. 목적의식적 동기와 비 목적 의식적 동기로 나뉜다. 목적 의식적 동기 와 비 목적 의식적 동기 예시 : 목적 의식적 동기는 사용자가 서비스를 이용할 때 방문과 사용 목적이 분명한 경우이다. 금융 서비스, 교육 서비스를 이용하기 위해서 이거나 자신이 진행하는 업무, 생산성을 높이기 위해서, 도구를 사용하기 위해서 사용하는 것처럼 목적이 분명한 경우들이 있다. 비 목적 의식적 동기는 특별한 목적이 있는 것이 아니라 습관적이거나 재미를 찾기 위해서 방문하는 동기다. 게임 서비스와 SNS 서비스 비 목적 의식적 동기와 관련된 서비스의 대표적인 예이다.
2. 행동(Behavior)
사용자의 행동은 서비스 안에서의 연속적 이동 단계와 각 단계별 구체적 행위들이다. 행동은 연속된 이동 단계와 단계 별 구체적인 행동으로 나눈다. 행동은 동기에서 부터 출발한다. 따라서 동기의 유형과 행동 유형도 밀접한 연관이 있다. 연속된 이동 단계가 특히 동기 유형과 관련이 많다. 동기 유형이 목적 의식적 동기이라면 사용자는 목적 달성을 위해서 행동하기 때문에 행동 유형이 직선적 흐름으로 진행된다. 사용자 입장에서는 자신의 목적을 달성하는데 방해가 되거나 목적 달성을 못하게 만드는 요소를 회피하고 싫어한다. 이 때 UX/UI기획에서는 사용자의 목적 달성에 방해되는 요소들은 모두 제거하고 목적 달성에 도움을 주는 화면 구성과 기능들을 구성해서 제공해야 한다. 복잡한 것을 배제하고 직선적 흐름이 효과적으로 진행 될 있도록 구성한다. 외부적인 영향에 의해서 수동적인 동기가 형성된 경우는 동일한 행동의 반복으로 나타난다. 찾는 정보는 가변적일 수 있다. 그리고 찾은 결과에 따라서 사용자의 행동은 또 다시 달라질 수 있다. 감정적 상태 변화와 같이 내부적 요인에 의해서 발생하는 수동적 동기는 스스로 먼저 해결해보려고 하고 만약 그것이 해결이 안될 경우 다른 도움을 받기를 원한다. 즉 이런 경우는 점진적 시도로 진행되고 작은 시대에서 다양한 시도들로 확대되며 상황에 따라서는 체념하기도 한다. 습관적 동기 유형의 경우는 습관에 따라 형성된 무의식적인 행동으로 이어지게 되고 반복되는 경향이 있다. 습관적 동기의 경우는 오래 머물지 않고 쉽게 이탈 할 수 있는 특징을 가진다. 이벤트와 혜택, 추천, 알림과 같은 이벤트에 따라서는 반응적 동기 유형이므로 이에 대해서 반응하거나 무시하는 두 가지 패턴 중 하나로 나타난다. 반응적 동기에 의해서 나타나는 행동은 빠르고 순간적이며 결과는 방응 하거나 무시하는 것 둘 중 하나 이다.
3. 고충(Pain Points)
사용자들이 서비스를 이용하는 과정에서 느끼는 어려움이나 불편 사항 사용자들은 서비스를 이용하는 과정에서 어려움을 느끼는 경우가 의외로 많다. 회사 입장에서는 이러한 고객의 어려움을 해결해야 하는 과제들이 있는 것이다. 그래서 UX/UI를 기획할 때 기존에 가지고 있었던 불편하고 어려웠던 것을 해결하기 위한 기획이 필요한 경우도 많다. 사용자가 서비스를 이용할 때 매끄럽지 않다거나 현재 트렌드와 맞지 않거나, 사람의 심리적인 매카니즘으로 보았을 때 사물을 인식하고 이해하고 해석하는 기본적인 본성을 거스르는 경우를 예로 들 수 있다. 고객과 사용자의 어려움을 해결했을 때 고객 서비스의 만족도 향상으로 이어질 수 있는 것이다. 만약 어려운 점이 고객과 사용자를 화나가 만들 수도 있다. 그리고 이러한 부정적인 마음은 부정적인 입소문 등으로 확대될 수 있다. 사용자 관점에서는 쉽고 직관적이어야 하고 효율적이어야 한다. 그리고 디지털 플랫폼의 UX/UI는 통일성과 일관성을 갖추고 있어야 한다. 사용자 관점에서는 자연스러워야 한다. 하지만 이러한 사용성 원칙에 위배된 구성이라면 사용자 입장에서는 어렵고 막연하고 이해하기 어렵게 된다. 혼란스럽게 만들고 비효율적인 움직임으로 이어진다. 불필요한 행동과 액션, 불필요한 요청과 문의가 뒤따른다. 그리고 일관되지 않으면 사용 방법을 기억하거나 학습하기 어렵고 실수가 나타날 수 있다. 자연스럽지 않다면 기대와 불일치 되기 때문에 동기부여를 제한하는 부정적인 효과를 만들어 낼 수 있다.
4. 니즈(Needs)
사용자들이 서비스를 사용하면서 기대하는 다양한 필요들 사용자의 니즈를 제대로 파악하기 위해서는 디지털 플랫폼 안만 찾기 보다 사회적 변화와 이슈, 트렌드를 함께 봐야 하는 것이다. 니즈는 단독으로 나타나지 않는다. 니즈는 상호 조합을 통해서 발현되는 경우가 많다. 니즈는 맥락, 독특한 감성, 섬세한 기능, 단계 축소와 자동화, 단순한 입력, 연결, 데이터 기반 추천, 개인화와 관련되어 있다.
5. 태도(Attitude)
사용자들이 서비스를 사용하면서 형성되는 하나의 태도 사용자들이 디지털 플랫폼에서 서비스를 이용할 때 형성되는 태도가 있다. 태도는 신뢰성과 감성과도 연관되어 있다. 태도는 긍정적이거나 부정적인 태도 뿐만 아니라 다양한 형태가 있다. 태도는 경험을 통해서 형성 되고 지속적으로 고착화될 수 있다. 태도를 확인하기 위해서는 필드 리서치 방법이 있다. 사용자의 태도를 밝히는 방법으로 단어와 개념 관계 파악 (Word-Concept-Association) 기법이 있다. 개념 관계 파악 기법은 사용자에게 서비스와 관련되어 연상 되는 3개의 단어를 선택하게 하고 해당 단어를 선택한 이유를 확인한다. 그리고 우리의 서비스가 향후 어떤 이미지를 연상시켰으면 좋을 지 다시 3가지 단어를 선택하도록 한다. 그리고 이러한 과정에서 일정한 패턴을 발견할 수 있게 된다. 이를 통해서 방향성과 해결해야 할 점이 명확해진다.
6. 맥락(Context)
사용자들에게 사용자 경험을 유도하기 위해 제공하는 주변 정보나 상황들 텍스트(조사와 UX기획)와 시각적인 것(UI디자인)을 제작하여 혼란을 막고 니즈를 충적시켜준다.

핵심 내용 3 :

UX UI 디자인 요소

전략 및 콘셉트
사용자 경험 전략 및 컨셉
서비스
사용자에게 전달하는 내용 및 제공하는 기능
정보 구조 및 흐름
사용자에게 전달하는 정보의 구조, 프로세스, 탐색 방식
인터랙션 디자인
사용자의 동장을 유도하고 실행하고 피드백하는 분야. 동적인 경험을 전달
사용자 인터페이스
사용자에게 내용을 전달하고 의사소통하는 표면. 내용을 구성, 배치, 표현한다. 정적인 경험을 전달
비주얼 디자인(GUI)
최상단의 표면. 전달하고자 하는 내용의 시각적인 형태. 색채, 표현방법 등을 반영. 시각적인 경험 전달.

2. 디자인 툴

1) 포토샵 & 일러스트

포트폴리오 제작에 필요한 디자인 툴 실습을 진행했다. 이론 중심 보다는 단기간에 툴을 사용할 수 있게 예제실습을 통해 진행했다. 포토샵 & 일러스트를 다뤄본적이 없어서 수업 따라가기가 너무 어려웠다.. 밑에 결과물을 보면 알 수 있다.. 수업 진행이 빠른감도 있지만 단기간에 툴을 사용하여 포트폴리오를 제작할려면 이 속도가 당연하다 생각이든다.. 부족한만큼 더 열심히 연습하고 공부해야겠다.

2) 피그마

피그마 수업은 전반적으로 실력이 어떤지 테스트하고 IceBreaking을 하는 시간이었다. 수업 진행 내용은 아래와 같다.

수업진행 내용

3) HTML/CSS

이전 학습한 경험이 있어 수업 진행 내내 단축키를 기억해 낼려고 노력했다. 전에 코드를 볼 때 너무 어렵다고만 생각했었는데 그 경험 때문인지 코드를 이해하기가 쉬워졌다. 코딩은 한번 놓치면 끝도 없이 배워야한다는 것을 알기에 코드 하나하나에 주석을 달고 이해할려고 노력했다.

HTML

! + ente → 초기 세팅 설정

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic_ex</title>
    <link rel="stylesheet" href="css/semantic_ex.css">
</head>
<body>
    <div class="wrap">
        <header>Header</header>
        <main>
            <section>Section</section>
            <section>Section</section>
            <section>Section</section>
        </main>
        <footer>Footer</footer>
    </div>
</body>
</html>

VS code 단축키

복사하기	Cmd + C
오려두기	Cmd + X
붙여넣기	Cmd + V
복사+붙여넣기	Cmd + D
한 줄 붙여넣기	Option + Shift + ↓
한 줄 삭제	Cmd + Shift + K
속성 붙여넣기	Option + Cmd + V
커서 아래 행 빈줄 생성	Cmd + Enter
다중선택(커서 위치 동일 문자 생성)	Cmd + Option + ↑/↓
한 줄 주석처리	Cmd + /

기본적인 css 설정 디폴트 값으로 만들기 위한 과정

/* Reset CSS */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ol, ul{
    list-style: none;
}
a{
    color: #333;
    text-decoration: none;
}

/* header CSS */

<div>

‘분할하다’는 뜻의 Division의 준말로, HTML문서 내에서 한 개의 가로 공간(Block)을 만드는 태그이다. 한 줄 전체를 차지하고 있지만 고정적인 공간 사이즈를 가지고 있는 것은 아니라는 뜻. 구획을 정하는 의미적인 태그
<div> 태그 자체는 구획을 정의하는 기능적 의미 외에 기능을 표현하지는 못한다. 하지만 html5에서 이들의 기능을 표현할 수 있도록 태그에 직관적인 의미를 부여한 것을 시맨틱 태그라 한다

❗ 예전에는 구획 나누는 것으로만 사용 했던 div를 좀 더 기능적요소를 넣음

header ⭐⭐⭐⭐ : 페이지 상단 네비게이션 등
footer ⭐⭐⭐⭐ : 페이지 하단 기업 정보 등
section ⭐⭐⭐ : 페이지 상위 컨텐츠 박스 → 크게 나누는 컨텐츠
article ⭐⭐ : 페이지 이미지와 글 등을 담는 박스
nav ⭐⭐ : 네비게이션
aside ⭐ : 페이지 좌우에 추가 정보를 담는 박스

<id>, <class> 속성

모든 태그에는 id 속성과 class 속성을 지정해 줄 수 있는데, 이를 이용하면 CSS나 JavaScript에서 태그를 좀더 쉽게 다룰 수 있다.
id는 원칙상 하나의 id당 하나의 태그에만 적용 할 수 있으며, class는 하나의 class를 여러 태그에 적용 할 수 있다.
- 클래스 선택자를 사용하는 이유 제대로 이해하기클래스 선택자를 이용하면 코드를 DRY하게 유지할 수 있다. DRY는 Don't Repeat Yourself의 줄임말로, 같은 코드를 반복해서 적지 말라는 뜻이다. 반복적으로 사용되는 CSS 코드를 각각의 요소 스타일에 하드 코딩하지 말고 (일일이 적지 않고), 하나의 클래스 선택자에 스타일을 지정한 뒤, 필요한 요소에 class 속성만 지정하여 코드를 재활용하면 된다.

id 에 줄 경우 아래처럼 #을 맨 앞에 붙여 사용하며, 원칙적으로 하나의 객체에만 적용할 수 있습니다.

#아이디{ 속성1:속성값; 속성2:속성값; }

class에 줄 경우 아래처럼 .을 맨 앞에 붙여 사용하며, 여러 객체에 적용할 수 있습니다.

.클래스명{ 속성1:속성값; 속성2:속성값 }

사용법

#m_box{ 
		width:500px; 
		height:300px;
}
.box{
		background-color:blue;
}

예제

<html>
	<head>
		<style>
			#m_box{
					background-color: #09C;
					width: 150px; height: 40px;
			}
			.box{
					width: 100px;
					height: 50px;
					border: 1px solid green
			}
		</style>
	</head>

<body>
	<div class="box">box 클래스</div>
	<div class="box">box 클래스</div>
	<div id="m_box">m_box 아이디</div>
</body>
</html>

실습 예제 도안 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
   <div class="semantic">
    <header>Header</header>
    <nav>Nav</nav>
    <section>
        <article>Article</article>
        <aside>Aside</aside>
    </section>
    <footer>Footer</footer>
   </div>

    
</body>
</html>

이번 주에 겪었던 어려웠던 점/ 시행착오

이번 주는 전반적으로 우리의 실력을 알아가고 기초 수업을 전반으로 진행됐다. 다음 주 부터는 더 많이 배우고 과제도 더 많아질거 같은데.. 포토샵,일러스트는 쌓이는 만큼 내가 소화하기가 많이 어려워서 미리 공부도 하고 예제 연습도 해봐야겠다는 생각이 들었다.

앞으로 내가 해봐야 하는 것들

포토샵, 일러스트 실력이 많이 부족하다보니 복습하는 과정이 필요할거 같아 수,목,금은 남아서 할 예정이다. 2정 정도 내가 스스로 예제실습을 만들 수 있을 때까지 해볼 생각이다. 그리고 코드리뷰를 스스로 매일 해볼 생각이다. 이전에 HTML/CSS를 배운 경험이 있어서 코드를 이해하는데 어느정도 도움이 많이됬지만, 방심하지 말고 처음 배우는거라 생각하고 코드 하나하나를 분석하고 이해할려고 노력해야겠다.

학습 평가 및 다짐/목표

"나는 왜 간절하지 않는가"라는 생각에 빠진 한 주 였다.

전공자 이면서 포트폴리오를 1,2개 이상 준비되어있는 동기들보다 2배 더 열심히 해야하는데 그러지 못했다.

제발 남들만큼 하지말고 남들보다 2배 더 열심히 하자.

마지막으로 유퀴즈에서 유재석의 의사 결정 방법에 대해 인상깊게 봤던 내용 중 하나인데 흔들릴 때마다 이 마을 꼭 기억해서 버텨야 겠다는 생각이 들었다.

만약에 이 선택으로 성공했을 미래의 내가 지금 내게 해주픈 말은 무엇일까?

만약에 이 선택으로 실패했을 미래의 내가 지금 내게 해주고픈 말은 무엇일까?

만약 내가 9월 22일에 스타터스 부트캠프가 끝나고 내게 해주고픈 말은
"그래서 후회없이 했어?"
라고 물어보고 싶다.
그 물음에 나의 대답이 "후회됩니다."라는 말이 나오지 않게, "최악의 상황"이 오지 않게
3개월 동안만 "최악의 상황"을 기억하고 열심히 했으면 좋겠다.

유데미(Udemy) 큐레이션을 받고싶다면? :
https://bit.ly/43JLW2l
* 유데미코리아 유튜브 채널 보러가기 :
https://www.youtube.com/@udemykorea
* STARTERS 취업 부트캠프 공식 블로그 :
https://blog.naver.com/udemy-wjtb
💡 본 후기는 유데미 스타터스(STARTERS) 취업부트캠프 6기 - UI/UX디자인 과정 학습 일지 리뷰로 작성되었습니다.