[UXUI] 포트폴리오 자가진단 키트
최소한의 기본 사항들은 지켜야 한다.
신입 특히 비전공 학원 출신들의 포트폴리오를 많이 보다 보면 공통된 부분에서 문제점이 발견하는 경우가 많았다. 단기간 동안 포트폴리오를 만들어내다 보니 기본적인 부분을 놓친 부분들이 많이 보였다. 이러한 사람들을 위해 아래 자가 진단할 수 있는 항목들을 만들었다.
아래와 같은 사항들이 잘 지켜져 있다면 기본적인 문제가 없는 포트폴리오라 생각된다.
예시 화면으로 유튜브 뮤직을 가져왔다.
좌측은 기존의 화면, 우측은 잘못된 사례로 만들었다.
1. 정렬을 제대로 맞춘 디자인
정렬이 어긋난 디자인들을 많이 봤다. 기존적인 정렬이 어긋난 경우에는 전체적인 디자인 퀄리티가 떨어져 보인다. 정렬을 맞췄을 때에도 기준점을 명확하게 주어 남들이 봤을 때 에도 어색함이 없어야 한다. 디자인할 때 제대로 한 것 같지 실수로 파일을 잘 못 건드려서 어긋난 사례도 종종 봤기 때문에 항상 확인이 필요하다.
2. 뚜렷한 차이를 준 디자인
우측의 경우 타이틀과 본문의 내용에서 별 차이를 느낄 수 없다.너무 디테일에 집착한 나머지 큰 차이가 안나는 디자인을 하는 경우가 있다. 나만이 알아볼 수 있는 사소한 변화는 남들이 알아차리기 어렵다. 차이점을 주고자 한다면 나만 알아볼 수 있는 작은 디테일이 아닌 명확하게 차이를 주어야 한다. 특히 텍스트의 경우 본문과 타이틀의 구별이 없거나, 연한 색상의 배너를 넣었을 때 배경과 차이가 나는지 주의를 해야 한다.
3. 크기와 비율을 맞춘 디자인
터치영역 크기를 고려해야 한다. 왼쪽의 경우 아이콘이 터치하기엔 너무 작다.웹 상에서 보는 것과 실제 모바일 기기에서 보는 것과는 느낌이 많이 다르다. 특히 디자인 경험이 전무한 상태로 만들다 보면 본인의 생각보다 굉장히 작거나 크게 만드는 경우들이 있다. 텍스트의 타이틀과 본문은 뚜렷한 차이가 있어야 하며, 본문은 읽힐 수 있는 수준의 크기가 나와야 한다. 또한 아이콘 및 버튼의 경우도 너무 작은 사이즈로 넣게 된다면 터치가 어려울뿐더러, 원하지 않는 다른 부분을 터치하는 경우가 발생할 수 있다.
기존에 많이 사용하는 앱들과 비교해 보았을 때 아이콘의 크기가 적당한지, 폰트의 크기는 가독성을 해치지 않는지를 확인하기 좋은 방법으로 기존 앱 화면을 캡처 후, 투명도를 조절하여 본인이 만든 화면 위에 올려보면 이러한 문제를 해결할 수 있다.
4. 메인 컬러를 잘 이용한 디자인
텍스트의 기본은 읽히기 위함이다. 심미적인 부분보다는 가독성이 우선이다. 텍스트에 너무 과한 메인 컬러 남용은 가독성을 해치고 산만하게 보인다. 포인트로 강조되어야 할 부분에만 사용하는 것이 좋다. 색을 쓰는 게 어렵다면 차라리 그레이 스케일 만을 가지고 디자인하는 것이 좋다.
5. 통일성 있는 디자인
왼쪽 화면과 동일하게 오른쪽 화면에서도 마찬가지로 면으로 채운 아이콘을 써야 한다.UXUI디자인은 시스템 가이드에 따라 정해진 규격에 맞춰 사용자에게 일관성 있는 디자인을 제공해야 한다. 가이드를 정하지 않고 디자인을 하는 경우, 이러한 점을 놓치고 디자인하는 경우가 발생한다. 각 페이지별로 타이틀의 폰트 사이즈가 다르거나 좌우 여백이 다르다면 그 디자인은 일관성이 없어 보이고, 디테일한 부분이 떨어져 보인다. 아이콘도 마찬가지다 선으로 만들지, 면으로 채울지 하나의 방법으로 정하고 동일하게 적용해야 한다.
가이드는 하나의 약속이다. 각 페이지별로 디자인이 다르다면 디자인 퀄리티적인 문제뿐만 아니라 개발자와의 소통에도 혼란을 야기할 수 있다. 하나의 탄탄한 가이드를 제작하여 디자인하면, 디자인적인 퀄리티뿐만 아니라 다른 페이지를 제작하는 데 있어 빠른 업무 진행속도를 얻을 수 있다.
생각보다 별거 없고 당연한 거 아닌가 라는 생각을 할 수 있다. 하지만 너무 기본적인 만큼 신경 쓰지 않고 놓치는 사람들 또한 많다. 좋은 디자인을 만드는 데에는 두 가지 방향이 있다 생각한다. 뚜렷한 장점이 있거나 혹은 단점이 없거나. 포트폴리오에서 단점들을 모두 지워낸다면, 남들과 다른 장점을 애써 넣으려고 하지 않아도 좋은 포트폴리오가 완성될 거라 생각한다.
