About Being Designer-Developer
작고도 사소한 것, 전설적인 디자이너 개발자로 거듭나기
Perceived Value
사용자에게 지각되는 가치
이것은 기능적인 가치와는 다릅니다. 기능적 가치가 아무리 좋아도, 지각되는 가치가 적다면, 사용자를 끌어들이기 어려울 것입니다.
명심할 것은, 지각되는 가치가 아무리 좋아도,
기능적인 가치가 전혀 없다면, 그 어플리케이션은 아무런 가치도 없게 됩니다.
Designer x Developer
이것은 Designer-Developer로 거듭나기 위한 과정입니다.
디자인이 가능한, 개발자가 되는 것이죠.(멋지지 않나요??)
White Space
공백은 앱에서 차지하는 빈 공간으로, 요소를 부각하는 효과를 가집니다.
Padding!
공백을 만들기 위한 위젯입니다.
위젯의 상하 좌우에 여백을 만들어줍니다.
Alignment!
화면의 요소를 나열하기 위한 위젯입니다. 글이나 모양을 어느 한쪽으로 정렬하기 위해 사용됩니다.
주로 이것은 패딩을 통해 해결되기도 합니다.
Typography
Consistency & Delight
일관성
일관성이란, 앱 전체를 통과하는 텍스트 테마를 정하고, 이 테마를 앱 전체에 적용하는 것입니다.
글꼴, 크기, 스타일을 최소화하면서도 의미를 잘 전달해야 합니다..
만약 TextStyle을 너무 자주 지정한다면, 일관성이 부족하다는 신호일 수 있습니다.
만족감
어플리케이션이 주는 만족감은 어플리케이션의 목적에 따라 다릅니다.
때로는 정석적인 방법을 통해서 만족감을 제공할 수도 있습니다.
예를 들어, 글의 헤드라인 같은 경우, 자간을 되도록 좁혀야합니다. 글자 크기가 클 경우, 글자 사이의 간격을 좁혀서 가독성을 최대한 높이는 것입니다. 단순하게는, 간격이 좁은 글자가 훨씬 멋지게 보입니다!
마찬가지로 줄 간격도, 헤드라인에서는 좁아도 되지만, 본문에서는 적절히 커야 가독성이 높아집니다.
Colors
색의 경우도 일관성이 중요합니다.
컬러 팔레트를 정하세요.
좋은 팔레트를 찾기는 어렵지만, 도움이 되는 온라인 도구들이 많이 있고, 좋은 글이나 튜토리얼도 있습니다.
또한, 미술 작품이나, 건축 양식에서도 영감을 얻을 수 있습니다.
팔레트를 정했다면, ThemeData를 통해 앱 전체에 적용하세요.
primarySwatch를 이용하는 것을 추천합니다.
primarySwatch는 기본색에 10단계의 음영을 부여한 팔레트를 제공합니다. primarySwatch가 제공되면, 앱은 여러가지 사소한 색들(텍스트 선택 색상과 같은)을 자동으로 선택합니다. 물론 언제든 원하는 위젯에서 색상으로 덮어쓸 수 있습니다.
accentColor는 앱의 특정 부분에만 사용해서, 그 부분을 더 돋보이게합니다.
Iconography
이미지를 멋지게 배치하기만해도, 앱의 지각되는 가치가 크게 향상됩니다.
이미지를 다른 위젯과 어떻게 배치해야할 지를 생각하세요. 사용자가 보기에 자연스럽고, 더 멋지게 배치해보세요!
물론 이미지와 앱 테마 색상의 일관성을 유지하는 것은 매우 중요합니다.
Animations
플러터에서 애니메이션은 기본적으로 curves.linear로 설정되어 있습니다.
최적의 애니메이션은 여러가지를 시도해보면서 찾아야합니다. 의외로 리니어한 애니메이션은 시각적으로 굉장히 부자연스럽습니다. 실제 자연은 그렇게 움직이지 않기 때문입니다.
여러 애니메이션을 한번에 실행하면, 시각적으로 혼잡하게 됩니다.
시차를 둔 도입 이라는 개념이 있습니다. 앱에 애니메이션을 추가할 때는, 시각적인 차이를 두고 애니메이션을 실행해야합니다.
Staggered Animation을 사용하면, Interval을 사용하여 애니메이션 컨트롤러가 어떤 시점에서 애니메이션을 실행할지를 지정할 수 있습니다.
마치며
전문 디자이너가 아니어도, 몇가지의 규칙을 통해, 앱을 더 쾌적하게 만들고, 사용자에게 지각되는 가치를 높일 수 있습니다.
디자인 기초, 색 이론, 타이포그래피, 심리학, 사회학에 대해 배우고 앱에 적용하세요.
