[앱 만들기 #3] Adobe XD에서 구성요소 만들기

이제 본격적으로 Adobe XD를 활용한 앱 프로토타이핑을 진행해볼 텐데요

 

1인 개발자에게 Adobe XD를 활용한 프로토타이핑이 너무 좋은 이유는 하나의 프로그램에서 기획/디자인을 완성하고 실제 어플리케이션처럼 구동해 볼 수 있다는 점에 있죠

 

아마 제일 먼저 스플래시 화면(어플을 켜면 제일 먼저 나오는 화면)과 메인 화면을 기획하게 됩니다

 

가장 먼저 하면 좋은 것은 바로 구성요소들을 만들어 놓는 것입니다

 

상단 바나 하단 바 같은 경우에는 화면마다 등장하는 요소입니다

이것을 매번 만들려고 하면 너무 번거로울뿐더러 수정하는 상황이 발생할 경우 곤란하겠죠 ;;

 

Adobe XD에서 제공하는 구성요소를 활용하면 고민할 필요가 없어집니다

 

 

 

구성 요소로 등록해 봅시다

 

보시는 바와 같이 구성요소로 만들 컴포넌트(요소)들을 선택해주세요

 

Shift + Ctrl + Y를 누르면 좌측에 에셋 창이 나타나는데요

 

구성요소 항목에 + 버튼이 있을 거예요

그걸 눌러주시면 구성요소에 등록이 됩니다

 

 

 

구성 요소가 만들어졌네요!

 

구성 요소로 등록이 되면 해당 컴포넌트를 언제든 복제해서 사용할 수 있어요

 

하단 바의 경우 메인 화면뿐만 아니라 정말 다양한 화면에서 쓰일 수 있겠죠?

 

또, 프로토타입으로 만드는 과정에서 동작을 표현하려면 똑같은 화면을 조금씩만 바꿔서 쓰는 경우가 많아요

그런 상황에서도 편하게 가져다가 쓸 수 있어요

 

 

메인 구성 요소 편집을 눌러줍니다

 

편집할 때에는 이렇게 구성 요소에 대고 오른쪽 마우스를 눌러서 메인 구성 요소 편집을 하면 됩니다

 

여기에서 메인이라는 의미는 최초의 구성요소(등록할 때 사용했던 것)를 뜻하는데요

 

수정할 상황이 생기면 이 메인 구성 요소를 바꿔줌으로써 나머지도 다 알아서 수정이 됩니다

 

만약 100개 화면이 있다고 한다면 한번 수정으로 100개의 하단 바가 한 번에 수정이 되겠죠?

(이 기능 아니었으면 큰일 날 뻔...)

 

한 번의 수정으로 모든 것을 수정!

 

이렇게 하단 바 안에 있는 아이콘 하나를 수정해봤는데요

 

사이즈를 줄이니 나머지 구성 요소들도 똑같이 아이콘의 사이즈가 줄어드네요

 

처음 프로젝트 시작할 때부터 공통적으로 쓰이는 것들을 구성 요소로 만들어서 모두 등록해 두는 게 좋습니다

 

화면 설계를 할 때 블록처럼 가져다 쓰기도 너무 편하고요

 

나중에 색상이나 세부 내용 수정할 때에도 번거로움이 없어요

 

상단 바, 하단 바, 공통되는 메뉴 등 자신의 앱에 공통적으로 쓰이는 부분 모두 구성 요소로 등록해 주시면 됩니다 :)