[학습일지] 221108 2주차 과제 정리, XD강의 챕터1~4

오늘공부 
강의) [AdobeXD] 챕터3.도형(3~7)
강의) 챕터4.컬러,그레이디언트
그룹과제) 유저리서치 계획서 - 의논하기~
5시간?

 

 

 

2주차 과제 정리

강의장에 슬랙에 엑셀에 들락거리는게 은근 시간을 잡아먹어서 (지난주,,) 모아서 정리해놨다. 이걸 보자~

 

그룹 프로젝트 - 유저 리서치 수행 계획서 작성후 슬랙에 공유 (~11/9 수)

-팀원들과 인사 후 분석할 앱 정하고, 앱을 사용하는 고객 입장에서 해당 앱에 원하는 서비스가 무엇인지 고민하기
-유저 리서치 수행 계획서 작성

** 유저 리서치 수행 계획서 양식은 따로 없음

A(90): 유저 리서치 수행 계획서 작성 후 슬랙에 공유한 경우

 

 

그룹 프로젝트(1) - 유저리서치 (~11/14)
-유저 리서치 수행 계획서 보강 및 유저 리서치 진행

 

 

2-1 평소에 많이 사용하는 어플리케이션의 불편한 요소 찾아보기 (~11/14)
평소 많이 사용하던 어플리케이션의 불편한 요소 찾아보기
** 어플리케이션 15개 이상 분석
** 한 어플리케이션 당 5개 이상 불편한 요소 찾기

 

 

A(90): 어플리케이션 15개 이상, 한 어플리케이션 당 5개 이상의 불편한 요소를 정리하여 제출한 경우

 

레퍼런스 분석
블로그에 레퍼런스(기존 서비스) 분석 후 개선점 작성 후 슬랙에 블로그 링크 공유

화면 구성 분석, 사용자분석, 개선점

 

 

아티클 디스커션
1) 제공된 아티클 3개를 읽고 요약 및 느낀 점을 슬랙에 공유(100자 이상)
2) 다른 수강생이 작성한 느낀점과 요약 3가지를 골라서 쓰레드로 본인의 생각을 공유 (글자수 제한 없음)
(상세 내용은 추후 슬랙으로 공지할 예정)

A(90): 본인이 3개의 아티클을 읽으면서 느낀점을 작성한 후 다른 수강생이 작성한 느낀점과 요약 3개자이 본인의 생각을 공유한 경우

 

 

---

[Adobe XD] 강의 정리

이영주 강사님

툴 처음 접해도 따라갈 수 있게 차근차근 가르쳐주신다! 

포토샵이랑 일러스트를 조금은 다룰 줄 알아서 조작도 익숙한 편이었다. 아직 다 못들은 피그마랑 같이 들으니까 헷갈려서 XD 먼저 쭉 들었다. 몰랐던 기능이나 기록해두고 싶은 것 위주로 간단하게만 정리해두기로!

 

1. 홈화면, 인터페이스

 

2. 아트보드&레이어

1) 아트보드

[단축키]

Ctrl+1 : 크기100% (우측상단 네비)

Ctrl+0 : 아트보드들이 한 화면에 다 보여짐

돋보기: 확대. Alt+돋보기=축소, Ctrl+키보드+,- = 확대,축소

무브툴(V), 핸드툴(Space) / Shift+클릭: 개체 복수선택 / Alt+드래그: 복제

* 작업할 때 크기 100%인지 먼저 확인하기. (벡터방식이라 차이 안나서 선 1픽셀이 왜이렇게 굵게 나오지 할 수 있음)

* Ctrl+0 : 수많은 아트보드 만들어졌을 때 한 눈에 보기 위해 사용

 

아트보드 복붙 Ctrl+C,V : 같은 간격으로 알아서 붙여짐

아트보드 선택: 아트보드 이름을 클릭하면 파란 선으로 활성화

*늘리면 나오는 점선은 뷰포트. 스마트폰에서 딱 보여지는 크기를 나타냄. 점선 이하는 스크롤을 움직여야 볼 수 있는 부분

 

2) 레이어

[내보내기에 대해 표시] 우측패널에서도 체크할 수 있다. 제플린,XD로 공유했을 때 체크하지 않으면 구성요소의 정보를 알 수 없다. 습관적으로 체크해 주는게 좋다.

[잠금]

[숨김]

 

 

3. 도형

1) 기본도형  종횡비 잠금(Shift) - 한쪽 수치 입력하면 비율은 그대로

Alt+그리기: 중심 기준, Shift+그리기:정사이즈 (다른툴과같음)

모서리(Radius) : 모서리 조절. Alt+조절 시 클릭한 부분만 변경

 

2) 다각형 - 옵션패널 수치 입력으로 n각형 지정 가능.

다각형 Radius - 점 하나. 패스 위 동그라미(별 비율)로 형태 조절

 

3) 펜툴(P)

Anchor point, Path : 패스 위 마우스를 대고 클릭해서 앵커포인트를 생성할 수 있다.

Shift+클릭으로 복수선택해서 조절, Delete로 앵커포인트 삭제

펜툴 종료: V(선택툴), ESC

곡선 각도를 조절하는 핸들러.

Alt+핸들러 : 한 쪽만 각도 조절 가능. 

 

- 쉽게 곡선 그리는 법

직선으로 그린 후 꼭지점 더블클릭하면 곡선이 된다.

이거랑 Alt+핸들러 이용해서 하트 그릴 수 있음

 

4) 선

펜툴과는 다르게 다른 한쪽이 중심축이 되어 회전한다.

테두리선 위치, 마이터 연결, 선 끝 모양, 대쉬 기능.

 

5) 배열, 병합

오브젝트 오른쪽클릭 - 앞,뒤로 가져오기 

앞 Ctrl+] 뒤(Ctrl+[  맨앞맨뒤 Shift+Ctrl+ ] or [

병합: 추가-합쳐짐. 빼기-앞쪽있는부분이 지워짐. 교차-교차부분. 오버랩-교차만빼고

한 번 더누르면 해제됨

 

6) 텍스트, 플러그인

- 텍스트(T) : 클릭해서(텍스트박스) or 드래그(텍스트필드)

클릭해서 만든 것: 크기조정하면 크기 바뀜. 박스: 박스영역만 조정

자간,.. ,정렬, 자동폭/자동높이/고정크기

 

- 플러그인 (왼쪽 아래 아이콘)

여러 유용한 플러그인 다운! 왼쪽의 검색 이용

Contents generator, Lorem Ipsum 다운

Contents generator - 랜덤하게 문장/단어 만들어주는 편리한 기능. (한글지원x)

이름,날짜,도시,이메일,문장 등. 문장 만들 때는 텍스트필드 만든 후 넣어주기!

 

- 폰트

아이폰) Human Interface Guidelines - Resource - Fonts 설치해서 사용 *SF pro는 PC에선 안됨

안드로이드) material.io - Resources - 구글폰트 Roboto, Noto Sans 다운하세요

 

4. Color, Graidient

 

1)면,선
hex: RGB를 6자리코드로 표현 2/2/2
RGB / HSB: hue,saturation,bright
+를 눌러 색상 저장. 드래그해서 밖으로 빼면 삭제
단색탭 클릭해서 그레이디언트 설정
*팔레트에서의 투명도 조절, 오른쪽 바에서의 투명도 조절 둘은 조금 차이가 있다.(선 부분)

2)그림자,흐림
내부그림자,그림자 - 색,투명도,x,y,b
배경흐림효과: 뒤에 있는 배경 흐림,명도,밝기 등 조절\
오브젝트 흐림효과

3)혼합모드

어둡게-겹쳐진색상,명도혼합	곱하기-레이어색상,명도 겹치게.	색상변-흰,검을 제외한 부분의 대비 강조
밝게-겹친부분의 밝은부분 부각	스크린모드-발광	닷지
오버레이-밝은부분 보호하며 혼합	소프트라이트-채도50%기준 밝은부분 더 밝게	하드라이트-채도50%기준 밝은부분 스크린, 어두운부분 곱하기 색상
차이-겹친부분을 보색으로 반전 광도	제외-이미지 대조를 적게 활성화	색조-채도와 명도가 겹치는 부분만 혼합
채도	색상	광도

해보면 아는거니까 대충 적음.

검정/흰색 배경을 없애고싶을 때 누끼를 딴 것 처럼 없애는데 활용할 수 있다



4)그레이디언트
컬러 그레이디언트 바에서나 도형 안에 점에서 추가,바꾸기 할 수 있다.
삭제하는 법: 이미지에서 delete 또는 바에서 밖으로드래그

선형: 선형툴 움직이듯 해서 방향 조절할 수 있음. 컬러스톱 사이에 적용이된다!
방사형: 회전,타원형으로. 중앙점 잡고 이동 시 위치 이동
각도: 음향컨트롤 조정하는 버튼같은 것 쓸 때 활용함. 크기조절은x

---

2주차도 할 게 많은 느낌.. 미리미리 해둬야지. 그룹과제 제출 기한이 너무 빠듯하다..ㅜㅜ UIUX 직무는 협업이 특히 중요한 분야이니 도움이 되도록 열심히 으쌰으쌰하고 많이 배워가고 싶다. 화이팅~ 오늘 과제 아티클이 올라왔는데 역시나 걱정되지만 재밌고 좋은 과제라고 생각한다. 수강생들이랑 의견을 나누는 방식인게 좋다. 더 열심히 하는 동기부여도 될 것 같고 기대가 된다~ㅎㅎ

TMI) 오늘 개기월식이라해서 강의 듣다가 8시몇분에 잠시 나갔다 왔다. 그리고 다이어리 그만 산다고 했지만 또 샀다. 학습하는 데에도 조금 활용해볼까 하는 마음~