제로베이스 66일차 학습노트이다.
오늘은 Adobe XD에서 오브젝트를 어떻게 배열하고 병합하는지, 그리고 그림자, 흐림 효과, 혼합 모드를 통해 시각적으로 어떻게 깊이와 분위기를 줄 수 있는지에 대해 배웠다. 단순한 형태의 조합이더라도 세밀한 조절을 통해 훨씬 정돈되고 완성도 높은 디자인을 만들 수 있다는 점이 인상 깊었다.
오늘의 강의 내용
1. 오브젝트 배열과 병합
오브젝트는 화면에 배치된 모든 요소(텍스트, 이미지, 도형 등)를 의미하며, 이들을 정렬하고 배열하는 기능은 디자인의 구조를 깔끔하게 만들어준다. XD에서는 ‘정렬(Align)’ 도구를 통해 여러 개의 오브젝트를 가로 혹은 세로 방향으로 정렬하거나 간격을 동일하게 맞출 수 있다. ‘앞으로 가져오기’, ‘뒤로 보내기’ 등의 계층 조정도 가능하며, 이를 통해 레이어 간의 순서를 조절할 수 있다. 병합 기능은 도형들을 하나의 형태로 결합하거나 잘라내는 기능으로, ‘추가’, ‘빼기’, ‘교차’, ‘제외’ 같은 옵션이 있다. 이 기능을 활용하면 아이콘이나 독특한 형태의 UI 요소를 만들 때 유용하다.
2. 그림자와 흐림 효과
그림자(Shadow)는 오브젝트에 입체감과 계층감을 부여하는 데 쓰이며, 그림자의 색상, 흐림 정도, 거리, 방향 등을 설정할 수 있다. 주로 버튼이나 카드 컴포넌트처럼 떠 있는 느낌을 줄 때 사용된다.
흐림 효과(Blur)는 두 가지가 있다. 하나는 오브젝트 자체를 흐리게 만드는 Object Blur, 다른 하나는 오브젝트 뒤에 있는 배경을 흐리게 하는 Background Blur이다. 특히 Background Blur는 유리처럼 반투명한 느낌을 줄 수 있어 모달이나 알림 UI에서 자주 사용된다.
3. 혼합 모드
혼합 모드(Blend Mode)는 오브젝트가 아래 요소와 어떤 방식으로 색을 섞는지를 설정하는 기능이다. 대표적인 예로 ‘Multiply’, ‘Screen’, ‘Overlay’ 등이 있으며, 이를 활용하면 오브젝트에 다양한 시각적 효과를 줄 수 있다. 이미지와 텍스트, 색상 레이어가 겹칠 때 유용하게 쓰이며, 포토샵과 유사한 방식으로 작동한다. 혼합 모드는 단순한 컬러 변경 이상의 느낌을 줄 수 있어, 감성적인 UI나 분위기 있는 디자인을 구성할 때 특히 효과적이다.
오늘 배운 기능들은 겉으로 보기엔 단순한 시각 효과 같지만, 실제로는 사용자 경험과 시각적 안정감에 큰 영향을 준다는 점이 흥미로웠다. 디자이너로서 단순히 예쁘게 배치하는 것을 넘어, 구조와 깊이, 분위기를 조절하는 시각적 설계 능력을 갖추는 것이 중요하다는 생각이 들었다.
이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.