개발자도 할 수 있는 안드로이드 앱 UI 디자인
프로그래머와 개발자는 대체로 디자이너가 아니라는 것은 널리 받아들여지는 사실입니다. 개발자는 앱이 작동하도록 만드는 데 집중하고, 디자이너는 앱을 미적으로 매력적으로 만드는 데 집중하죠. 하지만 왜 개발자가 둘 다 해낼 수 없다고 여길까요?
화려한 스플래시 랜딩 페이지와 정교한 레이아웃이 유행하던 예전에는 전문 디자이너를 고용하는 것이 당연했습니다. 그러나 오늘날의 트렌드는 미니멀, 혹은 적어도 크게 단순화된 디자인입니다.
일화 하나를 소개하겠습니다. 얼마 전 어떤 분이 PC 소프트웨어의 스플래시 스크린을 만들어 달라고 부탁했습니다. 저는 온 힘을 다해 스케치 용지에 그림을 그리고 포토샵으로 옮겨 화려한 네온 라인과 이펙트를 가득 더했습니다. 스플래시 스크린이라기보다 데스크톱 배경화면에 어울리는 수준이었죠. 요점은 정말 화려하고 정교한 디자인을 만들었다는 것입니다.
짐작하시겠지만, 의뢰인은 마음에 들어하지 않았습니다. 실제로 채택된 디자인은 겹쳐진 색상 원 몇 개로 된 작은 로고와 그 아래 소프트웨어 이름뿐이었고, 포토샵에서 2분이면 끝나는 작업이었습니다. 그런데 놀랍게도, 저도 그것이 제 디자인보다 낫다는 데 결국 동의해야 했습니다.
제가 말하려는 요점은 이것입니다. 프로그래머들은 제가 저지른 것과 같은 함정에 빠지기 쉽습니다. UI와 스플래시 스크린이 앱을 돋보이게 하는 화려하고 눈길을 끄는 것이어야 한다고 생각하는 경향이 있죠. 하지만 그럴 필요가 없습니다. 솔직히 말해, 그래서는 안 됩니다. 프로그래머의 마인드셋을 미학적 디자인에 적용해야 합니다. 단순하게, 기능적으로, 작동만 하면 됩니다.
이 글에서는 디자인 경험이 거의 없더라도 우아한 안드로이드 앱 UI/UX를 만들 수 있는 아주 간단한 방법들을 살펴보겠습니다.
특별히 원하는 것이 없다면 머티리얼 디자인을 사용하세요
앱이 인기를 얻고 보기 좋으려면 '독특'하거나 '남들과 차별화'될 필요가 없습니다. 구글의 머티리얼 디자인(Material Design)은 업계 전반의 앱 UI 표준을 만드는 것을 목표로 삼았고, 훌륭한 성과를 거두었습니다. SwiftKey, Nova Launcher, Textra SMS, YouTube 같은 최고의 안드로이드 앱들을 비롯해 수많은 인기 앱이 머티리얼 디자인을 고수하고 있습니다.
머티리얼 디자인의 핵심은 카드 기반 레이아웃과 단색 팔레트입니다. 구글은 업계 최고의 디자이너들과 협업하여 미니멀리즘 디자인 관행에서 많은 요소를 차용했고, 이 모든 것을 무료로 공개했습니다. 웹·앱 디자인 강좌가 전자책과 영상 등으로 수백 달러에 이르는 것을 감안하면 상당히 좋은 조건입니다.
머티리얼 디자인 시작은 놀랍도록 쉬우며, 더욱 간편하게 만들어 주는 도구들도 있습니다:
- Material Theme Editor (macOS + Sketch)
- Material Design Color Palette 플러그인 (포토샵 / 일러스트레이터)
- Material Design UI Kit PSD (포토샵)
- Android Material Design UI Kit (Sketch)
- Material UI Theme Generator
간단하고 우아한 머티리얼 디자인 테마 제작에 영감이 필요하다면 다음 목록형 블로그를 참고하세요:
- MaterialDesignBlog – 잘 만든 머티리얼 디자인 사례 15선
- MockPlus – 영감을 얻을 수 있는 최고의 머티리얼 디자인 웹사이트 12곳
- AndroidAuthority – 안드로이드 최고의 머티리얼 디자인 앱 10선
색상 그라디언트, 생각보다 훨씬 쉽습니다
머티리얼 디자인의 대안으로, 컬러 그라디언트는 간단하고 트렌디하며 눈길을 끄는 선택입니다. 디자이너들이 모든 색을 칠하거나 완벽한 그라디언트를 설계하는 데 많은 시간을 쓴다고 생각할 수 있지만, 그건 오산입니다. 포토샵에서 10초면 충분합니다.
얼마나 쉬운지 직접 과정을 안내해 드리겠습니다.
모바일용 새 포토샵 프로젝트를 생성합니다 (1080 x 1920px @ 72ppi면 충분합니다)
UIGradients.com에 접속해 마음에 드는 그라디언트를 찾습니다.
미리보기 위에 표시된 그라디언트 색상 코드를 복사합니다.
포토샵에서 빈 레이어를 우클릭한 뒤, 블렌딩 옵션 > 그라디언트 오버레이(Gradient Overlay)로 이동합니다.
드롭다운 버튼이 아니라 메뉴 안의 그라디언트 패턴 미리보기를 직접 클릭하세요. 미리보기를 직접 클릭하면 컬러 에디터가 열립니다.
이제 UIGradients에서 복사한 HEX 색상 값을 포토샵 그라디언트 에디터에 붙여넣습니다.
필요에 따라 조정하면 끝입니다. 이제 안드로이드 앱용 프로페셔널한 그라디언트 배경이 완성되었습니다.
그 외에 확인해 볼 만한 그라디언트 도구:
- WebGradients.com
- Android Shapes Generator (XML로 도형 생성, 그라디언트 옵션 포함)
JPG/PNG 대신 SVG를 사용하세요
버튼, 로고 등 그래픽 요소에 PNG나 JPG 대신 SVG(Scalable Vector Graphics)를 사용하는 것이 좋습니다. SVG는 품질 손실 없이 크기를 조절할 수 있기 때문입니다. 예컨대 JPG를 확대하면 화질이 저하되어 흐릿해지거나 픽셀이 깨지지만, SVG는 그렇지 않습니다. 많은 사람들이 안드로이드 화면에 맞춰 다운스케일할 목적으로 거대한 PNG 파일을 사용하려 하는데, 사실 품질 손실 없이 확장 가능한 더 작은 SVG를 쓰면 충분합니다.
게다가 SVG는 PNG보다 파일 크기가 최대 60~80% 작습니다. 즉, 앱이나 모바일 웹사이트가 사용자에게 더 빠르게 로드되고, 어떤 화면 해상도에서도 깔끔하게 보입니다.
Theme.AppCompat.DayNight으로 다크 모드 추가하기
앱에 다크/나이트 모드를 넣기 위해 두 개의 별도 테마를 디자인할 필요는 없습니다. AppCompat 라이브러리에 기능이 거의 내장되어 있어서, 활성화하고 값만 수정하면 됩니다.
자세한 구현 방법은 "안드로이드 앱에 다크 모드 구현하기" 가이드를 참고하세요.
템플릿 또는 모바일 UI 키트 활용하기
앱에 화려하고 커스텀된 GUI가 필요하지 않다면 템플릿이나 키트를 사용하는 것이 전혀 문제되지 않습니다. 템플릿과 키트는 영감을 주는 가이드라인으로 활용하거나, 그대로 사용하면서 자신만의 버튼 등을 추가하는 방식으로도 쓸 수 있습니다.
안드로이드 UI 템플릿과 키트를 찾기 좋은 리소스:
- SpeckyBoy – iOS & Android 무료 모바일 UI 키트 50선
- SketchAppSources – 안드로이드 UI 앱 리소스 (Sketch)
- Freebiesbug – PSD UI 키트 (포토샵)