제로베이스 67일차 학습노트이다.
오늘은 Adobe XD에서 그레이디언트 컬러를 다루는 방법, 이미지를 삽입하고 크기를 조절하는 방법, 그리고 도형 안에 이미지를 삽입하는 기능에 대해 배웠다. 실제 디자인에 자주 활용되는 요소들이라 실습하면서 유용함을 느낄 수 있었다.
오늘의 강의 내용
1. 그레이디언트(Gradient)
그레이디언트는 두 가지 이상의 색상을 부드럽게 연결해주는 컬러 효과로, 단조로운 배경에 깊이감과 생동감을 줄 수 있다. XD에서는 선형(Linear), 방사형(Radial), 각도형(Angular) 그레이디언트를 설정할 수 있으며, 각 색상의 위치와 투명도를 세밀하게 조절할 수 있다.
그레이디언트는 버튼이나 배너, 섹션 구분 등에 시각적 임팩트를 주기 위해 자주 사용되며, 배경을 자연스럽게 연결하거나 강조할 포인트를 만들 때 매우 유용하다.
2. 이미지 삽입과 크기 변경
XD에서는 이미지 파일을 드래그하여 쉽게 삽입할 수 있고, 원하는 영역에 정확하게 맞춰 넣을 수 있다. 삽입 후에는 크기를 조절하거나 잘라내는 등의 기본적인 편집이 가능하며, 비율을 유지한 채 크기를 조절하려면 Shift 키를 활용하면 된다.
삽입된 이미지는 ‘채우기(Fill)’ 방식으로 박스 안에 맞추거나, 필요 시 ‘자르기(Crop)’ 기능을 사용해 원하는 부분만 남길 수 있어 레이아웃 구성에 유연하게 활용할 수 있다.
3. 도형 안에 이미지 삽입
도형 안에 이미지를 삽입하려면 도형을 먼저 만든 후, 이미지 파일을 해당 도형 위로 드래그하면 자동으로 마스킹이 적용된다. 이 기능은 썸네일, 프로필 이미지, 카드 디자인 등에 자주 쓰인다.
도형 형태는 사각형, 원, 다각형 등 어떤 것이든 가능하며, 이미지가 삽입된 이후에도 도형이나 이미지 각각을 따로 조정할 수 있다. 이는 일러스트레이션 요소를 만들거나 디자인에 변화를 줄 때 매우 유용하다.
이미지와 그레이디언트는 디자인에 생동감을 주는 핵심 요소이며, 도형 마스킹 기능을 통해 제한된 공간 안에서도 다양한 표현이 가능하다는 점이 흥미로웠다. 디테일을 조절할 수 있는 능력이 곧 디자인의 완성도를 결정한다는 걸 다시 느낀 하루였다.
이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.