제로베이스 68일차 학습노트이다.
오늘은 Adobe XD에서 실무에 꼭 필요한 기능들인 마스크 만들기, 반복 그리드, 스크롤 기능에 대해 배웠고, 추가로 디자인 시스템의 개념과 필요성에 대한 이론 수업도 진행되었다. 실습과 이론이 적절히 섞여 있어서 디자인의 구조와 시스템을 함께 이해할 수 있었던 하루였다.
오늘의 강의 내용
1. 모양으로 마스크 만들기
마스크(Mask)는 특정 모양 안에 콘텐츠를 가두는 기능으로, 이미지나 오브젝트를 원하는 형태로 보여줄 때 사용된다. 마스크를 만들려면 먼저 마스크로 사용할 도형을 만들고, 그 위에 이미지를 배치한 후 두 요소를 선택한 뒤 ‘Shape로 마스크 만들기(Mask with Shape)’를 선택하면 된다. 마스크 이후에도 이미지와 도형을 따로 조정할 수 있어 다양한 시각적 표현을 유연하게 구성할 수 있다. 썸네일이나 사용자 프로필 등 실제 UI에 자주 활용된다.
2. 반복 그리드 활용
반복 그리드(Repeat Grid)는 동일한 구성의 콘텐츠(예: 카드, 목록, 갤러리 등)를 일정한 간격으로 빠르게 복제할 수 있는 기능이다. 복제 후에도 전체 구성의 정렬이나 간격을 실시간으로 수정할 수 있어 효율적이다. 텍스트나 이미지도 각 항목별로 개별 수정이 가능하며, 이미지 파일을 한 번에 여러 개 드래그하면 자동으로 각 셀에 나뉘어 들어가도록 되어 있다. 작업 시간을 크게 줄여주는 실용적인 기능이다.
3. 스크롤 활용하기
Adobe XD에서는 화면의 세로 길이가 긴 UI(예: 웹페이지, 앱 피드)를 디자인할 때 스크롤 기능을 활용할 수 있다. ‘아트보드 높이’보다 더 아래로 콘텐츠를 배치하면 자동으로 스크롤이 적용된다. 또한 고정 포지션 기능을 통해 헤더나 탭 메뉴처럼 스크롤 시에도 고정되어야 하는 UI 요소를 따로 설정할 수 있다. 이를 통해 실제 사용 환경과 유사한 인터랙션 프로토타입을 만들 수 있다.
4. 디자인 시스템의 필요성
디자인 시스템은 일관된 UI와 브랜드 경험을 위해 사용하는 가이드이자 규칙의 모음이다. 폰트, 컬러, 버튼 스타일, 간격, 아이콘 등을 사전에 정리해 두면 여러 디자이너가 함께 작업하더라도 혼선 없이 통일된 결과물을 만들 수 있다. 또한 디자이너와 개발자 간의 협업에서도 기준이 명확해지므로 커뮤니케이션 오류를 줄이고 유지보수 또한 쉬워진다. 큰 조직일수록 디자인 시스템의 중요성은 더 커진다는 것을 이번 이론 수업을 통해 알 수 있었다.
오늘 배운 기능들은 실제 UI 디자인을 더 빠르고 정확하게 구현하는 데 필수적인 도구였고, 디자인 시스템의 개념은 작업의 일관성과 협업의 효율성을 위해 반드시 이해하고 구축해야 할 요소라는 생각이 들었다. 실무를 대비한 강의 구성 덕분에 Adobe XD를 좀 더 깊이 있게 다룰 수 있게 된 하루였다.
이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.