민정

[ 스플래쉬 ]

- 스플래쉬 스크린 : 화면의 로딩 화면으로, 짧은 시간 반복적인 노출로 사용자에게 로고나 이미지를 각인시킬 수 있다.

- 첫 시작에는 하트와 하단 도형이 보이지 않다가 나중에 둘이 만나도록 하는 프로토타입을 주기 위해, 하트와 도형을 아트보드 밖으로 배치시켜준다. 이때 주의할 점은 화면 밖으로 아예 나가게 되면 XD에서 같은 객체로 인식할 수 없기 때문에 최소 1px 이상은 아트보드에 걸쳐 있어야 한다.

- 화면에 걸쳐져 있는 게 보일 수 있으니 불투명도를 100%로 준다.

[ 회원가입 ]

- 회원가입의 경우 사용자에게 입력을 요구하면 사용자는 이탈할 가능성이 높다. 그래서 최근에는 한 페이지에 한 카테고리의 정보를 입력 받거나 필수적 정보들과 선택적 정보들을 나누어 입력 받는 경우가 많다.

[ 튜토리얼 ]

< 관련 페이지 링크 >

• LottieFiles : https://lottiefiles.com/

[ 메인 페이지 ]

[ 콘텐츠 상세 페이지 ]

[ 검색 페이지 ]

- 검색창에서 엔터 키를 누르면 검색 완료된 상태의 화면으로 이동되도록 프로토타입 지정함.

[ 카트 리스트와 주문 ]

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

[ 상단 앱바 ]

- Title 텍스트를 텍스트 필드로 지정한 이유는 타이틀의 글자수가 길어졌을 때를 대비하여 우측에 있는 아이콘들이 밀리지 않게 함이다. 그래서 간격을 조절할 때에도 텍스트 필드 영역을 종모양 아이콘과 맞닿은 위치에서 아이콘의 크기만큼 빼줘서 계산한다.

( 종모양 아이콘과 맞닿은 위치값 - 24 )

- 베이스 라인을 계산할 때에는 텍스트 필드 박스를 기준으로 하는 것이 아닌 텍스트 자체에 두어 계산해야 한다. 보통 계산할 때에는 미리 가이드 할 수 있는 사각형을 만들어놓고 중간중간 계산해주면서 작업한다.

[ 탭 ]

- 탭을 알아보기 전에 먼저 반응형 크기 조정을 알아보자.

Tab 아트보드를 만든 후 모바일 형식으로 만든 상단 바를 복사해서 붙여넣는다. 그리고 각 레이어들마다 위치에 맞게 반응형 크기 조정을 '수동'으로 조절해준 후 전체선택하여 Tab 너비에 맞게 늘려준다.

이렇게 여러가지 탭과 웹, 모바일 화면을 작업할 수 있다.

[ 내비게이션 드로워 ]

[ 하단 내비게이션 ]

[ 버튼과 나인패치 ]

• 나인패치 제너레이터 : https://romannurik.github.io/AndroidAssetStudio/nine-patches.html#&sourceDensity=320&name=example

[ FAB 플로팅 액션 버튼 ]

[ 하단 앱바 ]

[ 리스트 디자인 ]

[ 카드와 스택 ]

- 먼저 타이틀과 이미지, 하단 텍스트 필드를 모두 선택하여 그룹 요소로 묶어준 후, Shift 키를 누르며 특정 요소를 드래그 하여 원하는 위치로 변경할 수 있다.

- 패딩 값도 상, 우, 하, 좌 방향의 값을 조정하여 사용할 수 있다.

[ 에셋의 활용 ]

- 특정 요소를 선택한 후 우클릭하여 '구성요소 만들기' (단축키 Ctrl K) 를 선택하면 좌측 구성 요소에 추가가 되고, 그 뒤로는 좌측 구성 요소에서 드래그 해서 가지고 와 사용할 수 있다.

( 피그마에서의 컴포넌트와 동일함 )

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

[ 이미지 삽입과 크기 변경 ]

- 이미지 가지고 와 사용할 때에는 항상 이미지가 망가지지 않는 선에서의 크기 조절과 다양한 효과 적용이다. 

최대한 이미지가 지지 않은 선에서 적용하도록 주의하자.

- 3D 효과를 줄 수도 있다. 해제를 할 때에는 옵션 값을 모두 0으로 수정한 다음 해제해야 한다.

[ 도형에 이미지 넣기 ]

- 도형 안에 이미지를 넣을 때에는 여러개의 이미지를 넣어보며 교체하기 쉬워 탐색기에서 이미지를 골라 드래그 하여 넣는 것이 편하다. 

- 더블클릭해서 보여질 부분을 조절할 수 있고, 기타 테두리와 효과 등의 옵션도 적용 가능하다.

[ 모양으로 마스크 만들기 ]

- 첫번째 자몽 이미지를 넣을 때에는 생성해놓은 다각형 안으로 바로 이미지를 넣어 삽입했다.

두번째는 마스크를 적용하려고 하는데 마스크를 적용하려면 도형이 가장 위에 있어야 하므로 정렬을 다듬어준다.

그리고 이미지와 도형을 모두 선택한 후 우클릭하여 '모양으로 마스크 만들기'를 적용한다.

- 마스크를 적용했을 때와 도형 안에 바로 이미지를 삽입했을 때 결과물은 동일하지만 마스크를 활용하여 생성한 것은 테두리는 지정할 수 없다는 차이가 있다.

그리고 마스크를 사용하면 종횡비를 풀어 이미지를 자유롭게 크기를 조절할 수 있다.

[ 반복 그리드 ]

- 반복 그리드를 사용하기 전에, 이미지 영역과 타이틀 영역을 생성해서 그룹핑하고 우측에 '반복 그리드' 버튼을 눌러 적용한다.

반복 그리드를 적용하면 우측과 하단에 초록색 바가 생성되고, 바를 늘려 반복 그리드를 생성할 수 있다.

- 특정 이미지의 크기를 변경할 때에는 반복 그리드를 해제한 후 특정 이미지만 더블 클릭하여 이미지를 변경해야 한다.

[ 스크롤 활용하기 ]

- 먼저 아트보드를 생성한 후 가이드 라인을 잡아야 한다. 가이드 라인은 가장 좌측과 상단에 마우스를 대고 드래그 해서 끌어올 수 있고 해당 가이드라인은 미리보기에서는 보이지 않는다.

- 아트보드의 상단에는 비디오를 둘 영역을 만들고 하단에는 반복 그리드를 사용하여 스크롤 영역을 생성 후 각각 이미지와 비디오를 삽입한다.

- 스크롤 영역에 대한 속성은 우측에서 설정할 수 있고, 우측 상단에 미리보기 아이콘을 눌러 확인할 수 있다.

- 비디오의 경우 기본 속성이 탭을 해야만 재생되도록 되어 있기 때문에 미리보기로만 봤을 때는 재생되지 않는다.

그렇기 때문에 다시 아트보드에서 비디오 부분을 더블클릭하여 선택한 후 관련 옵션을 설정한다.

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

[ 면과 선의 컬러 ]

- 색상을 지정할 때에는 Hex 코드를 자주 사용하고, 상단에 단색과 여러가지 그레이디언트 속성을 적용할 수도 있다.

- 하단에 + 버튼을 눌러 원하는 색상을 색상표로 등록할 수도 있고, 삭제하고 싶은 컬러는 선택한 뒤 드래그 하여 밖으로 버리면 된다.

[ 그림자와 흐림 효과 ]

[ 혼합 모드 ]

- 다양한 혼합 모드를 적용할 수 있고, 방향표를 사용하여 연속으로 효과를 바꾸어가며 적용해볼 수 있다.

- 보통 혼합 모드는 이미지의 특정 색상 영역을 안 보이게 하거나 보이게 하는 활용으로 많이 쓰인다.

[ 그레이디언트 ]

- 그레이디언트를 적용할 때에는 상단 바에서 원하는 위치를 클릭한 후 하단에 컬러를 다시 클릭하여 적용한다.

- 중간 지점에 다른 색상을 추가할 때에는 마우스로 클릭하여 추가하고 특정 컬러를 삭제할 때에는 마우스로 드래그 하여 밖으로 버려 삭제하거나 도형 레이어 안에 있는 선에서 클릭한 후 Delete 키를 눌러 삭제한다.

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

[ 기본 도형 ]

- 기본 도형을 그리기 전, 맞춤형 크기의 아트보드를 선택했을 때는 빈 화면의 보드이기 때문에 화면 비율의 정도를 알기 어려울 수 있고, 프로토타입 등의 작업이 불가능하다.

- 피그마와 거의 비슷하지만 XD에서는 마우스 위치에 따라 기준선을 생성하여 특정 위치와 동일한 점에서 또 다른 도형을 그릴 수 있다.

- 사각형 안에 사각형을 만들 때에는 가운데 선을 찾아 마우스를 위치시킨 후 Alt Shift 를 누르며 드래그 하여 생성할 수 있다.

- 우측 상단에 있는 정렬 속성을 사용해서 위와 동일한 사각형 안에 사각형을 만들 수도 있다. 

[ 다각형 ]

- 사각형의 경우 도형 내부에 생기는 동그라미가 각마다 보여졌다면 다각형에서는 하나의 동그라미만 보여진다. 그렇기 때문에 모든 각에 대한 Radius 값은 동일하게 적용된다.

- Path에 마우스를 가지고 가면 여기에도 동일하게 동그란 점이 생기는데, 이 점을 드래그 하여 움직이게 되면 도형이 뾰족하기를 조절할 수 있다.

[ 닫힌 도형 ]

- 펜 툴을 사용하여 닫힌 도형을 그려보자. 첫 시작인 앵커 포인트를 지정해주고 도형을 그리기 시작할 수 있다.

- 펜 툴로 사각형을 생성한 뒤 여러 패스 지점에 앵커 포인트들을 생성하고, 선택 툴로 포인트를 움직여 다양한 형태의 도형을 만들 수 있다. 

- 여러개의 앵커 포인트들을 선택하여 한 번에 움직일 수도 있다.

- 특정 앵커를 선택한 후 Delete 하여 없앨 수도 있다.

[ 직선과 곡선 ]

- 펜툴을 사용하여 직선과 곡선을 표현할 수 있다. (피그마와 동일하다)

- 위 아래로 생성되는 곡선이 아닌 위로만 볼록한 곡선을 만들 때에는 핸들러의 한 쪽 앵커에 마우스를 올린 후 Alt키를 누른 채로 움직여 없애준다. 그리고 전과 동일하게 드래그 하여 곡선을 생성하면 위로 볼록한 곡선을 만들 수 있다.

- 위로 볼록한 곡선을 연속으로 생성할 때의 다른 방법으로는, 펜툴을 사용하여 직선들을 생성한 후 특정 앵커를 더블클릭하여 곡선으로 만들거나 취소할 수 있다.

[ 선의 형태와 속성 ]

- 빨간색 직선은 펜툴로 만든 직선이고, 초록색 직선은 선툴로 만든 직선이다. 

먼저 펜툴로 만든 직선에서 볼 수 있는 원들은 앵커 포인트가 아닌 바운딩 박스의 표시이다. (도형에서의 회전과 이동을 설정한다)

그리고 선툴로 만든 직선에서 볼 수 있는 원들은 앵커 포인트이고 포인트를 움직이게 되면 해당 포인트만 이동 가능하다.

- 같은 크기의 도형을 만든 후 우측에 있는 속성 패널 옵션들을 사용하여 여러가지 형태로 변형하여 사용할 수 있다.

- 대시와 간격 옵션을 이용하여 직선(선과 도형)을 점선으로 만들 수도 있고, 선 끝 부분에 대한 속성도 적용할 수 있다.

[ 오브젝트의 배열과 병합 ]

- 오브젝트들의 정렬들은 Shift Ctrl [ ] 를 통해 변경할 수 있다. (피그마 툴과 동일하다)

- 다양한 병합 옵션을 통해 여러가지 도형을 만들 수 있다.

- 색상은 첫번째 적용한 색상 기준으로 일괄 적용된다. 

[ 텍스트와 플러그인 ]

- 텍스트를 입력하는 방식은 두가지 방식이 있다. 첫번째는 원하는 지점을 클릭하여 입력하는 방식이고 두번째는 영역을 먼저 만든 후 그 안에 텍스트를 입력하는 방식이다. 첫번째는 텍스트 박스, 두번째는 텍스트 필드라고 부르고 각각 속성이 조금씩 다르다.

- (텍스트) 박스에는 바운딩 박스가 하나이고, 필드는 4개가 있다. 박스 바운딩 박스를 움직여 크기를 키우면 텍스트 자체의 크기가 커지고, 필드의 바운딩 박스를 움직이면 텍스트 영역의 크기만 커진다.

- 해당 속성에 대해서는 우측 속성창에서 자유롭게 박스와 필드를 변경하여 사용할 수 있다.

- 텍스트 박스는 넓이와 높이를 변경할 수 없기 때문에 텍스트 크기를 변경해야 하지만 필드는 넓이와 높이를 변경할 수 있기 때문에 텍스트 자체에 크기를 변경하지 않아도 된다. (보통 필드를 많이 사용한다)

- 좌측 하단에 블럭 아이콘을 눌러 플러그인을 탐색하고 설치할 수 있다.

- 플러그인을 사용하여 임의의 텍스트들을 생성하고 우측 텍스트 설정 패널에서 다양한 옵션을 지정할 수 있다.

< 관련 플러그인 >

- ContentGenerator: 텍스트를 랜덤하게 생성해주는 플러그인

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

[ 아트보드의 활용 ]

- Ctrl 1, 0을 눌러 100% 비율로 볼 것인지, 화면에 가득차게 볼 것인지 볼 수 있다.

- 아트보드의 이름은 더블클릭 후 변경 가능하고, 이름을 클릭하여 특정 아트보드를 선택할 수 있다.

- 좌측 툴바에서 돋보기 아이콘을 눌러 화면을 확대하거나, Alt 키를 눌러 축소할 수 있다.

Ctrl +, - 를 단축키를 눌러 확대나 축소하는 것도 가능하다.

- 스페이스바를 눌러 드래그 하여 손바닥 모양으로 화면을 움직일 수 있다.

- 좌측 툴바에서 아트보드 아이콘을 누르면 어도비XD 초기 화면에서 볼 수 없던 기타 아트보드들(겔럭시 화면, 탭 화면 등)도 볼 수 있다.

[ 레이어 이해하기 ]

- 좌측 하단에 레이어 아이콘을 누르면 아트보드 정보가 보여지고, 아트보드 왼쪽에 메모지 아이콘을 더블클릭하면 해당 하트보드에 생성되어 있는 레이어들이 보여진다.

- 레이어 위에 마우스를 올려놓으면 우측에 아이콘들이 보인다. 그리고 첫번째 아이콘을 누르면 '내보내기에 대해 표시' 옵션이 적용되는데, 이 옵션이 적용되지 않으면 나중에 외부에 공유했을 때 인터페이스의 구성요소는 보이지만 정보는 볼 수 없게 된다. 그렇기 때문에 습관적으로 클릭을 해주는 것이 좋다.

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.