안녕하세요. 이제 막 UI 디자인을 입문하시는 분들을 위해 피그마로 직접 제작한 UI 템플릿을 소개해 드릴게요.

디자인 공부든 툴 공부든 우리는 너무나 할 게 많죠. 그런데 강의 영상을 보고 이해하고 아는 것과 직접 본인이 디자인하는 것은 많이 다릅니다.

뒤늦게 이 분야에서 전문성을 갖춰 일을 하려는 분들 입장에서는 출발선을 앞당길 수 있는 일종의 치트키라고 생각합니다. 이 템플릿은 이런 분들에게 추천드리는데요,

포트폴리오를 만들어야 하는 취준생 분들이나 UI 디자인으로 직무 변경을 희망하시는 분들, 아니면 본인의 아이디어를 빠르게 UI 디자인 해 보고 싶은 분들,

디자인 시스템을 만들어야 하는데 어떻게 할지 모르거나 시간이 부족하신 분들, 혹은 외주로 돈을 벌고 싶은 디자이너 분들도 포함될 것 같습니다.

전체적인 디자인은 OS 가이드라인에 최적화했고요, 쉽게 관리할 수 

있도록 변수 스타일들이 다 적용이 되어 있고, 반응형을 대비해서 오토

레이아웃이 컨스트레인츠를 정리가 되어 있어요.

템플릿 관련한 상세 페이지나 구매 링크는 설명란에 추가해 놓겠습니다.

우선 피그마 파일을 같이 한번 살펴볼

건데요. 프리미엄 기준으로 설명을 드리겠습니다. 파일을 열고 나면 왼쪽에

파운데이션이라고 있습니다. 컬러부터 스페이싱, 폰트, 스크린이랑 타이포그래피,

이펙트, 레이아웃, 그리드, 아이콘 이런

것들 있죠. 컬러에 대한 부분도 프리미티브 컬러에 대한 변수도 다

정리를 해 놨고요. 엘리어스 토큰으로

모드에 따라서 다크 모드와 라이트 모드 이런 것도 조절할 수 있도록

미리 세팅을 해 놨습니다. 이렇게 정의해 놓은 문서는 여러분들이 보기

편하게 제가 넣어 놓은 거고요. 오른쪽에 로컬 변수를 통해서 실제

등록된 변수를 확인하셔도 이런 식으로 값이 추가돼 있는 걸 볼 수가

있습니다. 그리고 목적에 따라서 이름을 구분해 놨는데요. 이 부분은 여러분이

자유롭게 수정하거나 추가하셔도 괜찮습니다. 그리고 백그라운드 컬러

같은 경우에만 적용이 되어야 하기 때문에 우측에 스코프 같은 경우도 필

부분에 프레임과 셰이프에 적용되도록 변경을 해 놨습니다. 텍스트일 때는

해당 변수가 뜨지 않도록 이런 것도 당연히 신경 써서 작업을 해 놨고요,

패딩 같은 경우도 이런 식으로 자주 사용될 부분을

4픽셀 그리드 기준으로 제가 정의를 해 놨습니다. 이 부분도 변수에서 패딩

부분에서 확인이 가능하고요. 이 부분 역시 마진 같은 경우는 코드에서 다른 데

나오지 않고, 갭에 대한 부분, 오토 레이어UI 적용되는 부분에만 사용할

수 있도록 이렇게 다 정리를 해 놨습니다. 그리고 스크린에 대한 부분도

정리를 해 놨는데요. 우리가 디자인할

때 한 벌만 하는 경우도 있지만, iOS, 안드로이드 이렇게 두 벌로

제작할 때가 있죠. 그럴 때는 제가 임의로 이렇게 사이즈를 조정을 해

놨는데요. 그냥 이렇게 가이드만 드리는

것이 아니라 실제 변수로 등록을 해 놨기 때문에 여기 있는 사이즈에

따라서 혹시 달라질 수가 있습니다. 임의로 한번 보여 드릴게요. 예를

들어서 주제에서 저는 커머스로 예를 들어 볼게요. 이런 디자인들이 있다고

가정을 했을 때 우측 페이지 부분에 모드를 관리하는 영역이 있습니다.

여기서 만약 스크린을 iOS가 아니라 안드로이드로 변경하면 이 안쪽

요소들에 다 변수로 등록되어 있기 때문에 자동으로 사이즈가 변경되고요,

변경된 것으로 끝이 아니라 안쪽 요소에는 다 이런 제약 조건(컨스트레인트)

값이 적용되어 있기 때문에 떨어지지 않습니다. 그리고 대부분

오토 레이아웃을 설정해 놨기 때문에

크게 틀어지지 않고요. 컬러 모드에 대한 부분도 지금 라이트 모드로 되어

있는데, 이 부분을 클릭해서 다크 모드로 변경하면 한 번에 컬러가

달라지는 걸 볼 수 있습니다. 이런 부분 역시 변수에서 컬러에 라이트 모드와

다크 모드가 반응하도록 되어 있기 때문에 이렇게 적용되는

것이라고 이해해 주시면 될 것 같습니다. 그 외에도 타이포그래피든지 아니면 이펙트,

레이아웃, 그리드, 아이콘 이런 것도 다

세팅되어 있고요, 타이포그래피 같은

경우도 변수로 다 등록해 놨기 때문에 여러분들이 만약 프리텐다드

가 아닌 다른 폰트를 쓰겠다고 하면 폰트 패밀리라는 이 변수만 변경하면 됩니다.

하시면 전체에 다 반영이 되는 걸 볼 수 있습니다. 그리고 컴포넌트 같은

경우는 자주 사용되는 주제에 맞게 왼쪽에 분리를 해 놨어요. 버튼 같은

경우는 이런 식으로 일라인 버튼부터 아이콘 버튼, 블록 버튼, 소셜 버튼

이런 것들이 있고요. 뭐 리스트나 카드 같은 경우도 자주 사용할 이런

디자인 템플릿을 제가 넣어 놨습니다.

폼에 대한 부분이랑 내비게이션 이런 것들도 다 등록을 해 놨고요. 단순히

모양만 다른 게 아니라 오른쪽에 상황에

따라서 베리언트 사용을 했고요. 불리언

사용을 했고, 텍스트에 대한 부분들 뭐 이런 것도 다 활용을 할 수가

있습니다. 컴포넌트는 이렇게 하나로 되어 있지만 실제 여기 숨어 있는

요소들도 있어요. 토글로 껐다 켰다

하는 부분 이런 식으로 자주 활용할 수 있도록 제가 정리를 해 놨습니다.

물론 이 부분도 여러분이 사용하시기 편하게 더

개선하도록… 같은 경우에는 다섯 가지로 제가 나눴는데요. 어느 앱이든지 간에

사용할 확률이 높은 것들 있죠. 뭐

플래시라는 온보딩 페이지, 인트로, 로그인, 회원 가입, 비밀번호 찾기 등 약간

동의, 암호, 본인인증 이런 것들이 있죠.

아니면 광고에 대한 부분들은 광고 타이틀을 다양하게 모아 놨고요, 목록이나

검색, 더보기 같은 경우는 은근히 하기

귀찮은 페이지들이 있죠. 서브 페이지들, 예를 들어 알림 설정이나 약관 동의 같은

경우, 설정 페이지, 고객 지원 이런 것들을 복사, 부여 넣기로 사용할 수

있도록 제가 최대한 심플하게 만들어 놨습니다. 그 외에 다양한 주제별로

이렇게 디자인들을 해 놨는데요, 이런

부분들은 여러분이 필요하다고 느끼시는

부분에 맞게 구매하시면 좋을 것 같습니다. 제가 이걸 만들게 된 이유가

있는데요, 뛰어난 감각을 요하는 그래픽

디자인과는 다르게 우리가 하려고 하는 UI 디자인은 직관적인 사용성이

중요하죠. 그러기 위해서 필수적인 부분은 OS 가이드라인에 맞춰서

제작을 해야 되고, 접근성도 고려해야 하고요, 유지보수도 신경 써야 하죠.

개발이라는 단계를 무조건 거쳐야

때문에 개발하기에 적합한 디자인이어야 합니다.

가장 중요한 건 사용자 측면에서 익숙해야 합니다. 너무 예술혼을

넣어서 만든 템플릿 혹은 키들이

있던데, 그런 건 실제 프로덕트에

반영하기에는 애매한 부분들이 조금 있습니다. 여러분이 어떠한 아이디어를

가지고 앱 디자인을 한다고 했을 때, 맥락 없이 시작하면 쉽지 않습니다.

좀 전에 제가 보여드린 컬러 시스템부터 타이포그래피, 그리드 시스템,

뭐 다양한 변수 관리부터 아이콘들, 이런 것들을 하나하나 만들어서 효

율적으로 관리하기 위한 디자인 시스템을 만드는 데는 꽤 많은 시간이

들어갑니다. 그런데 시간이 돈인 거, 여러분 다들 공감하시죠? Figma, 투자해서

UI 디자인을 공부한다던가, 디자인 시스템을 이해하고 구축하는 시간, 그

외에도 그런 것들을 활용해서 다양한 시안을 뽑아내는 이런 템플릿을

만드는 데 들어가는 시간을 상상해 보면 얼마나 오래 걸릴지 한번 계산해

보시면 좋을 것 같습니다. 최저 시급으로 계산을 해봐도 꽤 큰

값어치를 한다고 생각합니다. 참고로 Figma 무료 사용자분들은 기능 제약이

있어서 100% 활용이 안 된다는 점 참고해 주시고요. 그리고 한 번

만들고 끝이 아니라 새로운 기능이 나오거나 제가 스스로 생각했을

때 개선이 필요한 부분이 있다면 지속적으로 개선해서 파일을 공유드릴

겁니다. 여러분이 딱 한 번만 결제하시면 계속 같이 가는 거라고

복붙만으로 빠르게 완성하는 피그마 앱 UI 템플릿 출시!

디자인 첫걸음은 디자인베이스와 함께
새로운 분야에 첫발을 내디딜 때 누구나 막연하게 두렵죠.
디자인베이스를 디딤돌 삼아 디자인을 시작해보세요.


복붙만으로 빠르게 완성하는 피그마 앱 UI 템플릿 출시!

Scripts