podium_nam0422

원문 : https://brunch.co.kr/@maju/47

오늘의 아티클은 삶의 질을 높여주는 10가지 UX 사례를 주제로 이야기를 해보았습니다~

저는 10가지의 사례를 읽고 일반 사용자들도 프로덕트를 사용할 때 느끼는 불편함과 궁금증 등 다양하면서 

어찌 보면 사소함을 UI로 접목시켜 사용자의 편의가 개선된 사례라고 생각이 들었습니다.

해서, 제목을 사소함에서 시작한 10가지 UX 사례라고 지어보았습니다.

해당 내용에 대해서는 위 링크에서 보다 더 자세하게 안내하고 있으니 위 링크를 봐주시면 됩니다.

저는 위의 사례에 대한 저의 생각을 정리와 함께 작성해 보았습니다.

1. 에어비엔비 - 숙소 와이파이 연결

여행을 갈 때, 특히 해외에 여행을 가거나 노트북 또는 태블릿을 사용할 때 쉽게 와이파이를 연결해 주는 부분이 

인상적입니다! 저도 숙소에 갈 때 매번 공유기를 찾고 비밀번호 입력하고 하던게 여간 귀찮았던 게 아니었는데요.

그리고 0과 알파펫 o를 틀리거나 할 때 다시 입력해야 하는 수고스러움도 불편함을 느끼고 있었지만

에어비앤비는 숙소 예약과 와이파이 연결을 쉽게 할 수 있는 서비스를 제공한다고 해요.

2. 산타 - 문제 소거 기능

저는 이 서비스가 참 신박하다고 느낀 게 누군가가 '이런 문제 푸는 방식을 온라인으로 접목시켜 보면 어떨까?'라는 생각을

하고 이 서비스를 만든 게 아닐까?라는 생각을 해보았는데요.

저도 시험을 보거나 문제를 풀 때, 또는 공부할 때에도 1번에서 5번의 답 중 답이 아닌 것을 지워 나가는 방식의 공부가

훨씬 더 좋더라고요. 이러한 문제 풀이 방식은 실수 또한 줄여준답니다.

3. 카카오뱅크 - 중복 이체 방지 안내

여러 사람에게 이체를 해야 할 경우 간혹 실수로 두 번 이체를 하게 되는 경우도 생기더라구요.

그럴 때 다시 뒤로 돌아가서 확인해 보고 다시 처음부터 이체하려니까 너무 번거로웠던 기억이 있었습니다.

카카오뱅크에서는 저 같은 사용자들의 편의성을 개선해서 중복된 이체자일 경우 메세지를 띄워주는 참신한

기능이 있습니다.

4. 무신사 - 모자필터 내 '모자 깊이'

무신사에서는 모자깊이 텝을 추가하여 다른 앱들과 다르게 좀 더 섬세한 옵션이라고 생각이 들어요.

저는 모자가 잘 어울리지 않는 사람이라서 오프라인으로 깊이감을 보고 선택하는 스타일이었는데 무신사에 

이런 옵션이 있는 줄 처음 알았네요! 다음에 모자 구매할 일 있을 때 깊이감 있는 모자를 한번 구매해 보아야겠습니다.

5. 유튜브 뮤직 - 샘플 텝

많은 사람들이 음악을 찾을 때 앞부분만 듣고 음악을 선택하는 경우가 많다고 해요.

유튜브 뮤직 샘플 텝은 이런 사용자의 특성을 반영하여 후렴구 30초나 전주나 1절 부분을 들려주면서 

음악을 즐기는 새로운 경험을 제공한다고 합니다.

요즘 또 쇼츠의 시대이니 이런 부분에서 참 편리한 기능이라고 생각합니다.

6. yes24 - 책 사이즈 비교 기능

온라인에서 책을 구매 시 이 책 사이즈가 어느 정도 인지 궁금할 때가 간혹 있으신가요?

저도 책을 좋아하는 편이지만 책 사이즈를 고려하면서 구매해 본 적은 없는 것 같아요!

그러나 yes24 개발자 분들은 이런 사소함을 추가하여 책을 선택하는데 편의성을 제공해주고 있습니다.

7. 정육각 - 리뷰어의 구매 횟수 정보

제품을 살 때, 맛집을 갈 때, 배달 음식을 시킬 때 등등 다양한 리뷰와 평점을 참고해 보곤 합니다.

그러나 요즘은 댓글알바, 블로그 마케팅 등 다양한 사람들과 업체를 들여 작성한 것 같은 느낌을 받곤 하는데요..

정육각 앱에서는 '사용자의 구매 횟수 정보를 구매자 정보와 함께 제공'합니다.

사용자의 재구매에 대한 직접적인 데이터가 되기 때문에 해당 제품에 만족해서 몇 번이고 구매했다는 데이터가 됩니다.

8. 현대카드 - 소비 잔소리 기능

'돈 아껴 써라' , '다음 달에 쓸 돈 남겨둬라' 등등 현실에서 부모님께 들을 잔소리를 

현대카드에서는 순화해서 앱이 알려준다고 해요.

원하는 알림 금액을 설정하고 푸시 알림을 통해 '잔소리'를 해주는 기능인데요

오프라인에서 듣던 말을 UI로 접목시켜 재밌게 개발한 서비스라고 생각이 들었습니다.

9. 여다 - 자동 여행일정 계획받아보기

저는 엠비티아이가 J이지만 여행은 편해서 가는 여행이라고 생각을 하게 되어서 완벽한 계획보단 널럴한 계획을 

세워두는 편이에요. 솔직히 그 마저도 귀찮을 때가 있어서 어디 가야지, 어디 가야지만 대충 정해서 가는 경우도 있는데요.

여다에서는 이런 귀찮음을 개선해서 사용자의 여행 일정을 대신 짜주는 기능이라니 참 신박하네요.

하지만, 이런 남이 짜주는 계획은 원치 않기 때문에 저는 참고만 하는 걸로 ㅎㅎ

10. 다락 - 짐 유닛 정보

다락은 대용량의 짐을 보관할 수 있는 서비스입니다.

다양한 크기의 보관 공간(유닛)을 제공하는 서비스가 있는데요.

보관함 크기를 3D로 보여주어 공간감을 인지할 수 있도록 도와주는 서비스를 제공해 줍니다.

지난 주 피그마 기초적인 공부를 얼추? 끝 마치고 이제 본격적으로 UX/UI 디자인 공부를 들어가게 될 것 같습니다 ㅎㅎ

그런데... 강의는 들었지만 아직까지 어렵고 생소한 단어들이 얼마나 많은지.. 

들으면 들을 수록 '그게 뭐였지?' 하는 단어들이 너무 너무 많더라고요.

이런 단어를 모르고 지나가는게 쌓이고 쌓이다 보면 분명 큰 어려움이 닥칠 것으로 예상하기에

기초 부터 튼튼히 지나가고자 하는 마인드로! 복습을 합니다!

그래서 오늘은 지난 주를 복습할 겸 피그마에 나오는 그런 단어들을 정리하면서 알아보겠습니다!

(용어 하나 하나가 중요하지만 특히나 더 중요한 용어에는 ★을 붙여 볼게요)

▶ 8포인트 그리드 디자인 : 일반적으로 가장 많이 사용하는 규칙, UI를 8의 배수에 맞춰 배치하는 레이아웃 규칙

(일정한 규칙이 있다면 디자이너와 개발자가 서로 물어보는 번거로움을 줄일 수 있기 때문)

※레이아웃 이란 문자, 그림, 기호, 사진 등을 제한된 공간 안에 효과적으로 배열하여 시각적 구조와 디자인 요소를 조직하는 뜻

▶ 프레임 : UI를 설계할 때 디자인은 코드로 변환 할 수 있는 구조로 만들어야함.

프레임은 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어짐 , 컨테이너 라고도 불림

※프레임은 코드 블록을 만드는 기능이고, 그룹은 편집이나 조정이 필요할 때, 또는 편의를 위햇 여러 개체를 하나로 담는 기

★

▶ 오토레이아웃 : 레이어를 쌓고, 프레임을 배치하고 정렬하는 피그마의 핵심 기능

개체를 패딩으로 감싸 컨테이너를 만들 때 사용함

UI의 크기는 개체의 크기 + 패딩으로 만들어짐, 개체를 둘러싼 분홍색 박스가 패딩 입니다

▶ 컨스트레인트 : 제약(조건),제한이라는 뜻 (오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한함)

오토레이아웃을 정말로 오토-레이아웃으로 만들어주는 기능

파란색 점선이 자식 개체(파란색 박스)가 부모 개체(하얀색 프레임)에 대해 가진 조건을 컨스트레인트라고 함

자식 컨테이너가 부모에 고정되어 움직이는 일종의 '핀' 위치 - 다른 말고 Anchor(앵커)라고 함

▶ 프레임 리사이징 : 부모 컨테이너의 리사이징 값에 따라 자식의 리사이징 값이 영향을 받거나

반대로, 자식 컨테이너의 리사이징 값에 따라 부모의 리사이징 값도 영향을 받게하는 기능

-> 말 그대로 사이즈가 변경된다는 뜻

리사이징 옵션으로 수정 가능 

- 리사이징의 종류

※자식이 고정값(Fixed)라면, 부모는 감싸(Hug)게됨 : 자식은 고정, 부모만 수정

자식 사이즈가 수정값(Fill)이라면 부모는(Fixed)가 됨 : 자식은 부모의 값에 맞게 사이즈가 수정됨

자식과 부모는 둘 다 고정일 수도 있음

▶ 파운데이션 : UI를 구성하는 가장 작은 알갱이, 

예) 버튼 하나를 만들기 위해 존재하는 모든 요소 (컬러, 레디우스. 폰트, 아이콘, 간격 등)

 → UI는 기초 재료인 파운데이션과, 이 파운데이션을 조합해 만드는 컴포넌트로 나눌 수 있음

▶ 헥스코드 : 빛의 3원색(RGB)를 16진법으로 구성괸 컬러를 부르는 말 

ex)#FFFFFF

▶ 컬러 스타일 : 디자인에서 사용할 색상을 모아두는 팔레트

컬러 스타일은 기본적으로 2~3가지의 색상으로 만들어짐

포인트 컬러 : 정말 중요하고 핵심적인 부분을 강조할때 사용하는 컬러 (프라이머리 컬러, 엑센트 컬러라고도 불림)

백그라운드 컬러 : 배경색 컬러 (일반적으로 흰색을 씀)

세컨더리 컬러 : 배경색에서 도드라지는 부분을 만들어 포인트 컬러를 뒷받침하는 색 (서브 컬러라고도 불림)

▶ 컴포넌트 : 파운데이션을 조합해서 만들어지는 구성품, 디자인 단위의 개념, 피그마로 만든 UI블록

※개발에서는 조금 다른 개념으로 쓰이는 등 맥락에 따라 개념이 조금씩 달라짐, 컴포넌트라는 표현을 쓸 때는 

서로 같은 걸 의미하는 지 확인해서 써야함

▶ 마스터 컴포넌트 : 반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있도록 해주는 기능

따라서 마스터 컴포넌트는 원본이 되어 복사된 컴포넌트를 한번에 수정하거나 편집할 수 있도록 도와 줌

▶ 인스턴스 : 마스터 컴포넌트의 복제본, 마스터 컴포넌트의 속성을 그대로 이어 받음

마스터 컴포넌트는 이름에 ❖ 아이콘이 붙지만 인스턴스는 ◇ 아이콘이 붙음

※인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지 않음

(컴포넌트 수정보다 인스턴스를 수정하는 것이 더 우선 적용되기 때문에)

컴포넌트를 지우더라도 인스턴스는 남아 있음

연결을 해제하면 인스턴스는 컴포넌트와 분리되고 일반 프레임으로 변경됨(Detach(디테치 : 분리하다)라고 불림)

★

▶ 디자인 시스템 : 다른 디자이너와 개발자들이 같은 생각을 하고 같은 정도로 이해력을 돕기 위한 효율적인 업무 시스템

UI 구조, 쓰는 방법, 유의해야 하는 부분까지 모든 부분을 '문서'의 형태를 가지고 있음

▶ UI 키트 : 디자인 시스템과는 다르게 사용하는 규칙과 방법은 없고, 단순히 UI를 모아둔 것에 지나지 않음

▶ 의사 상태(Pseudo State) : 가짜의, 가상의라는 뜻으로 컴포넌트의 가상의 상태를 표시할 때 사용

마우스를 올리면 색상이 변하는 것도 의사상태,

버튼이 눌렸을 때,텍스트를 입력하려고 눌렀을 때, 체크박스를 눌렀을 때, 누를 수 없을 때 등 다양한 경우가 있음

 □ UI의 분류
▶ 액션(Action) : 버튼과 같이 사용자가 중요한 행동을 수행할 때 사용하는 UI

▶ 인풋(Input) : 사용자의 입력을 받을 때 사용 (검색창과 같은 기능)

▶ 인포메이션(Information) : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용 (메세지나 스낵바, 라벨 등)

▶ 내비게이션(Navigation) : 사용자가 페이지를 이동할 때 사용 (네비게이션 바, 앱 바, 화면 하단의 탭 바, 사이드 바 등)

▶ 컨트롤(Control) : 사용자가 설정이나 값을 수정할 때 사용 (라디오, 체크박스, 스위치 등)

▶ 텍스트 필드 컴포넌트 : UI의 분류중 인풋에 해당하는 컴포넌트

▶ 플레이스홀더 : 플레이스(자리) + 홀더(지키고 있는 것)로 '자리표시자'라고 함

사용자가 입력해야하는 예시를 제공하는 용도로 사용

▶ 밸리데이션 : 텍스트필드에서 사용자가 입력한 텍스트가 유효한지 아닌지를 검사해 주는 것

즉, 유효성 검사(밸리데이션 체크)라고 불림

▶ 컨트롤 컴포넌트 : 사용자가 선택지를 특정할 수 있도록 하는 요소

▶ 프로퍼티 : '속성' 이라는 뜻을 가지며 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룸

▶ 컴포넌트 프로퍼티 : 컴포넌트 안의 요소가 바뀌거나 의사 상태일 때 이런 변화와 변경을 만들 수 있는 컴포넌트 기능

★

▶ 배리언츠(Variants) : '변종'이라는 뜻으로 '변화'와 관련

컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능

즉, 컴포넌트의 가상의 상태를 만들때 사용

컴포넌트 프로퍼티 알아보기

▶ Boolean : Y or N을 선택하는 형식이라는 뜻
컴포넌트 안에있는 특정 요소를 보이게 하거나 안 보이게 설정할 수 있는 속성
아이콘 또는 텍스트에 적용하면 키거나 끄고 할 수 있음

▶ Instance swap : 말 그대로 인스턴스를 스왑하는 기능 
인스턴스를 다른 인스턴스로 교체하는 기능(인스턴스를 인스턴스가 아닌 것으로는 바꿀 수 없음)

▶ Text : 컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포넌트 속성으로 만들어 주는 기능

▶ 위계(Hierarchy, Priority)

'얼마나 중요한 행동을 하기 위한 버튼인가'를 담으며 사용자가 반드시 해야하는 중요한 행동이라면 가장 돋보이는

1순위의 버튼을 사용하고 2~3순위의 버튼으로 나누는 방식

1순위 부터 프라이머리(Primary), 세컨더리(Secondary),터시어리(Tertiary)의 순위로 나눔

▶ 합성 컴포넌트 : 컴포넌트를 모아 또 컴포넌트를 만든 것

▶ 네스티드 인스턴스 : 감싼 인스턴스 기능, 재료로 쓰인 컴포넌트를 하위 컴포넌트, 본체를 상위 컴포넌트라고 볼 때

하위 컴포넌트의 속성을 조작할 수 있도록 하는 기능

nest(둥지) 안에, 다른 컴포넌트 안에 들어가 있다

UX/UI 디자인 교육 과정이 4일 차입니다. 내일이면 벌써 일주일이 지나가네요.

역시 작심삼일은 과학인가봅니다...

오늘은 지난 3일 보다 약간 해이해진 상태로 공부를 했는데요 ㅎㅎ,,, 

하 지 만~! 작심삼일도 삼일에 한 번씩 해주면 된다고 하잖아요? ㅋㅋ

저는 다시 내일부터 또 힘내서 열심히 공부해볼까 합니다!

해이하면서 공부했다고는 해도 그래도 오늘도 여러 가지를 배울 수 있었습니다.

오늘은  UI키트와 디자인 시스템이 무엇인지에 대해서 다뤄 볼 건데요.

먼저 디자인 시스템이 무엇인지 살펴보겠습니다!

1. 디자인 시스템

- 디자인 시스템의 개념

디자이너들은 웹과 앱을 디자인합니다. 이때 웹과 앱을 제품(프로덕트)라고 부르는데요.

프로덕트를 만드는 디자이너들은 사용자들이 겪는 문제를 찾아 디자인으로 개선하는 일을 합니다.

이 때 디자이너들은 UI를 매번 새로 만들게 된다면 작업의 량도 늘어나는 수고스러움을 겪게 될 것이고

UX(사용자의 경험)의 문제가 무엇인지에 대해 파악할 시간도 부족해지게 됩니다.

이럴 때 UI를 만들어 놓고 필요할 때 가져와서 사용한다면 어떨까요? 

작업량은 줄어들고 사용자의 니즈를 파악할 시간이 더욱 늘어나겠죠?

그런데, 디자이너는 혼자 일하는 사람들이 아니에요. 다른 디자이너들도 있고, 또 개발자들과도 일해야 합니다.

내가 머릿속으로만 생각한 UI 디자인이 다른 디자이너나 개발자도 같은 생각을 가지고 만들어 갈 순 없어요.

이때 필요해지는 것이 디자인 시스템입니다.

디자인 시스템은 UI구조, 쓰는 방법, 유의해야 하는 부분까지 상세하게 적혀 있는 문서라고 생각하시면 됩니다.

- 디자인 시스템의 목적

디자인 시스템의 목적은 반복적인 UI를 효율적으로 관리할 수 있게 만들어 줍니다.

한번 만들어 두고 다음에 또 쓰게 될 때 복사해서 붙여 넣으면 작업 시간도 그만큼 줄겠죠?

그다음 팀 전체가 같은 정도로 이해할 수 있게 됩니다.

피그마는 개발자와 디자이너가 공통 작업이 가능하기 때문에 어떤 디자이너가 UI를 사용하더라도 일관된 사용법을

지킬 수 있게 됩니다.

코멘트도 섞어가면서 디자인을 하게 된다면 여러 번 할 미팅도 단 몇 번으로 줄일 수도 있을 것입니다.

2. UI키트

UI키트는 쉽게 생각하면 디자인 키트의 하위 개념이라고 생각하면 쉬워요!

디자인 시스템과는 다르게 사용하는 규칙과 방법은 없고, 단순히 UI를 모아둔 것에 지나지 않을 뿐입니다.

만약 개발자와 디자이너 단 둘이서 프로덕트를 만들어보자라고 했을 때

디자인 시스템은 오히려 작업의 수량만을 늘리게 될 수도 있습니다.

서로 합이 잘 맞고, 팀 인원이 적다면 오히려 완벽한 문서를 갖추는 게 비효율적일 수 있습니다.

이럴 때는 UI 키트 수준만 유지한 채로 빠르게 만드는 게 더 효율적일 수 있겠죠?

디자인 시스템과 UI키트의 차이점이 무엇인지 예시를 들어 볼게요!

김치, 돼지고기, 대파, 마늘, 고춧가루 등등

이런 요리 재료들이 있습니다.

이 요리 재료들을 가지고 어떤 음식을 만들어 볼까요?

김치찌개?

김치제육?

김치찜?

어찌 보면 삼겹살 구워 먹기도 가능하겠네요

이렇게 요리재료들만 나열이 되어 있다면 우리는 이 요리재료를 가지고 무엇을 만들지 예상하기 힘들어요.

이런 요리 재료들을 UI키트라고 할게요.

그럼 이 요리 재료에 디자인 시스템이 들어간다면

배추김치 1 포기, 돼지고기 목살 300g, 대파 1컵(200ml), 다진 마늘 1큰술, 고춧가루 2큰술 등등


김치는 5cm 크기로 썬다, 목살은 3cm 크기로 썬다, 대파는 어슷썰기 해서 준비한다, 마늘은 다져둔다 등등


김치찌개 레시피 : 냄비에 목살을 넣고 적당히...

이렇게 디자인 시스템은 재료 목록과 다듬는 방법, 조리법까지 상세하게 나와 있는 요리책이 되는 셈인 거죠!

디자인 시스템은 UI 자체뿐만 아니라 규격과 스펙, 사용 사례, 주의 사항 등이 모든 게 들어간 종합적인 제품 가이드라인이 됩니다!

사용자가 사용하는 웹 또는 앱의 대부분의 UI들은 명확한 명시성을 가지고 있습니다.

그 주요한 옵션들의 차이점이 명확히 보이지 않으면, 사용자는 잘못된 옵션을 선택하거나 기능을 오해하게 될 가능성이 있습니다.

더불어 선택의 폭이 넓은 웹 또는 앱 사이트에서 선택 옵션을 명확하게 구분하는 것이 사용자의 스트레스를 줄이며 정확한 정보를 

주는 좋은 서비스겠죠?

유저가 옵션을 스스로 파악하고 우선순위를 잘 정한다고 가정할 수 없습니다.

디자인 한 UI에 명시성이 없다면 유저의 의사 결정 프로세스가 느려지고 불필요하게 복잡해질 수 있습니다.

결국 UI 디자인에는 유저가 올바른 결정을 내리도록 도와주어야합니다.

그럼 왜 중요할까요?

유저가 웹 또는 앱을 사용하다가 차이점이 명확하지 않은 옵션을 만들게 되면 사용자가 실수를 하게 되면 서비스의  잘 못을 탓하게 

됩니다.  좋은 UX는 유저가 처음에 올바른 선택을 하도록 돕는 것이 중요합니다.

잘못된 옵션을 선택하면 때로는 돈을 낭비할 수도 있습니다.

실수를 할 때 올바른 선택을 찾기 위해 수고로움도 들게 됩니다.

서비스에서 저지른 실수 하나만으로 회사의 평판이 손상될 수도 있는 무서운 상황도 생기겠죠?

UI 디자인에 있어서 정말 많은 부분을 봐야 한다는 걸 알게 된 아티클이었습니다.

저는 웹, 앱을 만들 때 어느 정도 정형화된 가이드라인이 있지만 심미성 있게 독특하게 만들어보고 싶다는 

생각도 가지고 있었는데요.

유저에게 있어서 명시성이 내가 생각하는 명시성이 아닐 수도 있겠구나 나는걸 알게 해주는 글이었습니다.

우리는 유저가 아님을 명심하고 나에게는 당연한 게 남에게는 당연한게 아니다 나는걸 다짐해야겠습니다.

더 명확하게 설명할수록 사이트가 성공할 수 있다는 걸 깨달아야겠습니다.

원문 : https://www.nngroup.com/articles/explicit-differences/

3일차 내일배움캠프가 끝나갑니다.

후... 아직 많이 부족함을 느낀 하루였던 것 같습니다.

오늘 배운 오토레이아웃 기능을 이해하는게 어찌나 힘든지... 

강의 들으면서 진땀을 뺏네요. ㅎㅎ (한 5번은 돌려 본것 같습니다)

내일은 좀 더 시간을 체계적으로 세우고 실행할 수 있도록 해야겠어요!

1. 프레임과 그룹 차이 알아보기

이번 시간엔 두 개의 크고 작은 프레임을 만들어 주었습니다!

프레임과 그룹의 차이를 알아보기 위해 만든 두개의 프레임도 복사해서 아래쪽으로 띄워주겠습니다.

상단에 있는 두 프레임을 함께 선택 후 우클릭을 눌러 보겠습니다.

'Frame selection' 으로 묶어 줄게요!

그리고 밑에 있는 두 프레임은 같은 방식으로 Group selection을 적용해줄게요.

눈에 띄는 차이점은 없겠지만 이제 수정을 해보면서 어떤 차이가 있는지 알아보겠습니다.

이렇게 네게의 박스를 각각 색상을 입혀줄게요.

이번엔 상단에 있는 프레임에 Fill을 입혀 보겠습니다.

박스의 아래에 흰색 배경이 깔린게 보이시죠?

그리고 밑에 있는 그룹도 같이 묶여있는 상태로 Fill을 입혀보겠습니다.

어떤가요? 이미지 처럼 아래에 색깔이 깔린게 아닌 객체의 색상이 한번에 같이 바뀐 걸 알 수 있죠?

즉, 프레임 : 각각의 블록들에 별개의 배경색을 정할 수 있고, 별개의 코드 블럭이 됩니다.

그룹 : 여러 객체를 하나로 묶어둔 상태이기 때문에 코드가 아닌 블록이 됩니다. 이런 그룹은 한번에 옮기기 위해 사용하는 기능입니다.

※코드 블럭 : 우리가 사용하는 웹과 앱은 코드를 읽고, 디자인으로 다시 바꿔 화면에 보여줍니다.

우리가 피그마에서 그린 디자인은 코드가 되며 코드는 기본적으로 네모난 박스 영역을 만듭니다. 

이 때, 생기는 박스 모델을 코드 블럭이라고 부른답니다. (우리가 보는 화면의 디자인들은 모두 코드 블록으로 이루어져 있어요)

2. 오토레이아웃 이해하기

오토레이아웃은 피그마의 꽃이자 기본기의 끝판왕이며 핵심이라고 합니다.

세상엔 정말 다양한 디바이스가 있습니다.

웹과 앱을 만들 때 이런 디바이스를 고려해야 하는데 이럴 때 유연하게 대응할 수 있는 기능이라고 이해해 보았습니다.

오토레이아웃은 개체를 패딩으로 감싸 컨테이너를 만들 때 사용합니다.

즉, 우리가 만드는 UI의 크기는 개체의 크기 + 패딩입니다.

오토레이아웃을 활용하면 유연한 UI 디자인이 가능하겠다는 걸 느꼈습니다.

그럼 오토레이아웃을 만들어 보겠습니다.

이렇게 텍스트를 하나 작성해 주시고 마우스 우클릭 후 add auto layout을 적용해 보겠습니다.

이렇게 생성한 오토레이어는 프레임이 아닌 객체에 오토레이아웃을 적용한 프레임이 됩니다,

이번엔 다른 방법으로 만들어 볼게요

다른 텍스트를 만들어서 Frame selection을 적용해 보겠습니다.

그 후 다시 우 클릭 후 add auto layout을 적용해 보겠습니다

앞서 만든 두 개의 프레임 박스가 어떻게 다를까요?

1번 : 프레임이 아닌 객체에 오토레이아웃을 적용한 것

2번 : 이미 만들어진 프레임에 오토레이아웃 속성을 부여하는 것

말이 좀 어렵죠? ㅎㅎ 저도 이해하는데 한참이 걸렸답니다.

1번 : 기본 패딩값을 가진 오토레이아웃이 생깁니다.

2번 : 프레임 자체가 오토레이아웃 속성으로 변환이 됩니다.

(사실 저도 아직 오토레이아웃을 완벽하게 이해하지 못 한 것 같습니다 ㅎㅎ;;; ㅠㅠ...)

앞으로 과정에서 계속 공부하고 익숙해지다보면 깨닫게 되겠죠~?

절대 포기하지 않고 uxui 디자이너가 되기 위해 달려가볼게요!!!! 으쌰으쌰~~!

여러분들은 AI를 얼마나 사용하시나요?

본인의 업무에서 AI를 사용하고 계신다면 업무 하는데 비중은 얼마나 되시는지 궁금합니다.

2025년 빠르게 변화하는 AI는 업무에는 물론 일상의 이곳저곳에 스며들어 있습니다.

앞으로의 미래에서도 분명 AI는 많은 일자리를 대체하게 될 것이고 현재에도 '자동화'가 가능한

포지션은 빠르게 사라지고 있습니다.

이런 시대에 살아가고 있는 우리는 방대한 양의 '빅데이터'를 다루면서 속도와 정확성까지 갖춘 

AI의 방향성을 잡아주는 직업이 선호되는 세상이 아닌가 싶습니다.

그렇다면 UX 디자이너를 꿈꾸는 사람으로서 이런 미래 시대를 살아가는 우리는 어떤 마인드셋을

가지고 직업을 임하는게 좋을까요? 한 번 알아보겠습니다.

" 사용자가 서비스를 사용하면서 직면하거나 만날 수 있는 모든 행위 "

UX 디자이너를 정의내린다면 이런 뜻이죠.

중요한 건! '사용자 or 유저'

UX 디자이너에게 중요한 건 '어떻게' 사용자를 만날지 설계하는 것이라고 생각됩니다.

최근 들어 AI를 활용하여 체계적이고 치밀하게 잘 설계하지만 실제로 성과로 빠르게 전환되지는 않습니다.

우리에게 알맞은 고객을 AI가 탐색은 해줄 수 있겠으나 '설득'과 '전환' 시키는 과정은 아직 온전한 사람의 영역입니다.

현재의 AI는 개발과 디자인, 기획까지 있어 테크닉적인 모든 분야를 빠르게 흡수하며 장악해나가고 있습니다.

이런 때에 준비해 볼 만한 게 무엇이 있을까요?

저는 'AI 어시스던트 기반' 으로 사고하고 활용하는 능력이 중요해질 것이라고 봅니다.

AI가 빠르게 확장할때 'UX는 왜 살아남을 수 있을까?

자세히 보면 모든 분야에 만능 솔루션 서비스인 것 같은 AI도 허점이 많다는 것을 알 수 있습니다.

UX는 결국 커뮤니케이션과 사람에 대한 관심이라는 인간의 복잡함을 AI는 온전히 공감하고 해석할 수는 없기 때문입니다.

UX를 개선하여 성과를 보기 위해서는 '사람에 대한 관심과 호기심을 기반'으로 접근해야 함을 알아야 합니다.

끊임없는 WHY와 HOW를 고민하고 관찰하는 습관을 가져야겠습니다.

UX를 설계하거나 리딩하는 사람이 '사람'에 대한 관심이 없으면 결국 '사용자에 대한 배려'가 없음을 사용자/유저는 한 번에 

알아차립니다. 

이번 아티클을 정리하고 공부하면서 AI 기반적 사고가 어떻게 중요한지 알게 되었습니다.

많은 포지션이 사라지고 새로 탄생하는 지금 AI를 활용하며 테크닉적인 부분을 성장해도 좋지만 

온전히 AI에게 맡길 수 없는 부분도 명확하다는 느낌이 들었네요.

앞으로 AI가 어떻게, 얼마나 발전할지는 알 수 없으나 적어도 UX 분야에서 인간의 복잡성과 미묘성을 과연 

해석하고 정의하는 날이 올지 궁금하네요.

부트캠프 강의가 2일차가 되었습니다~

하루 12시간 공부가 생각보다 힘들지만 뭔가 배워간다는 기분이 참 좋네요 ㅎㅎ

함께하는 팀원분들도 좋은 분들이라 즐겁게 공부한 2일 차였습니다!

2일 차에는 피그마 기초 강의를 배워 보았는데요.

기본 도형툴을 사용해서 조금 더 복잡한 패스를 배워 보았습니다~!

1. 스트로크 

위에 있는 rectangle 툴을 클릭하고 아래 두 개의 사각형 모양을 만들어 보겠습니다.

만들어진 사각형 박스에 스트로크를 추가해 보았는데요~ 

한번 자세히 확대해 볼게요~~

보시면 크기가 작은 사각형과 큰 사각형의 스트로크의 굵기가 어떤가요?

똑같은 1px의 굵기가 나온 걸 알 수 있는데요.

스트로크가 입혀진 상태에서 사각형 사이즈를 줄이고 늘려봐도 스트로크의 사이즈는 줄어들거나 늘어나지

않는 걸 알 수 있습니다.

그럼 스트로크의 굵기를 도형에 맞추어 조절하는 방법을 볼게요!

도형을 선택 후 마우스 우클릭으로 뜨는 창에서 outline stroke를 찾아 주고 클릭해 보겠습니다.

그리고 아웃라인 스트로크를 먹인 도형을 다시 클릭 후 한번 사이즈를 이리저리 변경해 볼게요~

어떤가요? 위 이미지처럼 스트로크와 도형이 따로 움직이는 걸 확인해 볼 수 있죠?

그럼 이제 스트로크도 마저 도형과 같은 크기로 맞추어 보겠습니다.

도형과 맞추니 스트로크의 굵기가 처음 만든 도형에 비례하여 줄어드는 것을 확인해 보실 수 있습니다 ^^

2. Flatten

이번에는 사각형 박스의 꼭짓점에 곡선을 주어보겠습니다.

이전과 똑같이 두 개의 박스를 만들어 볼게요.

두 개의 박스를 만들고 작은 박스는 크기를 줄이기 전에 곡선을 만들어주고 줄여준 모습입니다.

제가 만들어보고 싶은 박스는 큰 박스의 모양인데 잘 보시면 작은 박스는 모양이 살짝 찌그러진 모습이지요?

이렇게 곡선 모양이 똑같다 보니 작은 박스가 뭔가 어색해진 모습입니다.

이럴 땐 어떻게 해야 할까요??

다시 다른 박스를 만들어 보겠습니다.

똑같이 꼭짓점을 곡선으로 만들게요.

그리고 아까 사용해 본 outlime stroke 위에 flatten을 적용해 보겠습니다.

아무것도 바뀐 게 없어 보이죠? ㅎㅎ

그럼 한번 적용한 도형의 사이즈를 줄여 볼게요.

도형을 줄여보니 아래 있는 도형과 똑같은 모양의 박스가 되었습니다!

이렇게 도형을 만들어 줄 때는 꼭 피그마에서 flatten을 적용해 주고 사이즈를 변경해주셔야 함을 기억해 주세요!

3. Subtract selection

이번에 볼 것은 서브트렉 셀렉션입니다.

도형 툴을 가지고 여라가 지 재밌는 도형을 만들 수 있는 툴입니다.

이번에는 사각형과 라운드 모양의 도형을 서로 교차해서 붙여보겠습니다.

(라운드 도형의 위치가 위로 가도록 해주세요)

이제 우측 툴의 상단을 확인해주겠습니다.

페이지 모양? 같은 툴 옆에 화살표를 클릭하면 union selection과 subtract selection이 보이는데요.

union selection은 묶음 선택한 도형들을 하나의 오브젝트로 합쳐주는 역할을 합니다.

그럼 저희가 알아볼 subtract selection을 클릭해 볼게요!

서브트렉 셀렉션을 선택하니 원래 있던 라운드 도형은 사라지고 사각형의 모양에서 반원이 빠진 모양이 만들어지게 되었습니다~

이런 방법을 응용한다면 피그마에서도 많은 도형을 만들어 볼 수 있겠죠~?

앞으로 내일배움캠프에서 배우게 될 피그마 교육이 기대가 됩니다 ^^

꼭 끝까지 완주할 수 있도록 열심히 해볼게요!

훌륭한 UI 디자이너가 되는 날 중에 2일 차가 지났을 뿐입니다.

앞으로 더 힘들 수도 포기하고 싶을 수도 있지만 오늘 작성한 이 글이 힘이 되어 줄 것 같다고 생각이 드네요

2025년 떠오르는 트렌드를 소개해드리려고 합니다. ^^ 

현제 세상은 디지털 세상이 그 어느 때보다 빠르게 변화하고 있습니다.

그에 따르게 UI 디자인 또한 새로운 변화와 트렌드가 계속해서 생겨나고 있습니다.

오늘 소개해드리는 UI 디자인 외에도 정말 많은 디자인이 있지만 9가지를 

대표적으로 소개해 보겠습니다!

1. 빅 타이포그래피 (Big Typography)

크고 굵은 텍스트를 주요 시각적 요소로 사용합니다.

큰 텍스트가 중심이 되어 시선을 사로잡고 가독성을 높이며 디자인에 개성을 더해줍니다.

특징은 깔끔하고 미니멀한 레이아웃과 함께 자주 사용합니다.

2. 브루탈리즘(Brutalism)

브루탈리즘은 굵고 큰 활자체와 단색 구성이 특징입니다. 거친 느낌을 주며 잡지 같은 느낌을 줍니다.

특징은 불필요한 장식은 피하고 명확성을 위해 딱딱한 격자 모양의 구조를 사용 합니다.

3. 모르피즘(Morphism)

선명한 초첨과 부드러운 흐림 효과를 혼합하여 현대적이면서 유동적인 느낌을 만드는 것이 특징입니다.

이런 디자인은 인터페이스의 깊이와 상호 작용을 향상시켜 보다 직관적이고 시각적으로 매력적으로 만들죠.

4.텍스트 전환(Text Transitions)

텍스트에 움직임을 더해서 역동적이며 매력적으로 만듭니다.

핵심 컨텐츠를 강조하여 사용성을 향상시킵니다.

다른 애니메이션과 함께 사용하면 생동감 있으면서 의도적인 느낌을 주는 세련된 반응성 있는 디자인이 만들어집니다.

5. 이모티콘

텍스트와 이모티콘을 결합한 디자인 입니다. 

디자인의 개성과 감정을 표현하며 매력적인 상호작용이 특징입니다.

6. 라이트닝 다크

어두운 디자인에 조명 효과 들어간 디자인 입니다.  그림자릴 사용하여 고급 스러운 느낌을 줍니다.

또 그림자 때문에 깊이감이 표현이 되기 때문에 중요한 요소를 강조하고 어두운 인터페이스로 역동적이고

시각적으로 멋지게 만들어 집니다.

7. 3D

깊이와 상호작용성을 주면서 감각적인 디자인입니다.

사실감을 주며 역동적이며 현대적인 감성을 줍니다.

8. 벤또 그리드 (Bento Grid)

깔끔하고 정돈된 레이아웃을 만들어 어떤 기기에서도 멋지게 보이는 디자인을 

보장하는 디자인 입니다. 구조와 미학의 균형을 이루어 인터페이스를 기능적이며 시각적으로

매력있게 보입니다.

9. 대화형 객체 (Interactive objects)

대화형 객체는 사용자의 동작에 따라 움직이는 디자인입니다.정적인 요소를 마우스나 터치에 반응하도록 만들어 몰입감을 더하며매력적인 디자인입니다.

이렇게 9가지 2025년 ui 트렌드를 알아봤습니다~!

디자인운 결국 창의력이라고 생각합니다.

어떤 서비스나 제품을 경험하다가 가끔 눈쌀을 찌푸리는 일이 있죠. 그런 작은 순간이 '아하!' 하는 순간 디자이너에게는 창의력 발산의 기회가 된다고 합니다. 그런 순간이 창의력 발산의 기회이며 디자이너에게는 정말 멋진 순간이 되겠죠?

성공하는 ui 디자이너가 되기 위해서는 트렌드를 따라가는 것이 아닌 트렌드릴 만들어 가는 

디자이너가 되어야함을 잊지 말아야 합니다!