UX/UI 문외한이 하는 디자인
정의, 클론 디자인, 그리고 피드백까지!
1. UX/UI 디자인이란?
2. 나이키 트레이닝 페이지 클론해보기!
3. 그리고 피드백받기ㅠㅠ
앞으로는 내가 배웠던, 그리고 배우고 있는 디자인의 개념과 클론 디자인 한 것을 하나씩 올려가며 글을 써나갈 예정이다!
앞의 글에서 말했듯 한 서비스가 나오기까지 크게 위의 역할들이 필요하다. 어떤 서비스를 하기로 맘먹었다면 기획 단계를 통해 시장 조사를 어떻게 할 거고, 고객들로부터 어떤 것을 테스트할지를 정한다. 보통은 노코드를 사용해서 시장성을 검증할 수도 있기 때문에 이 단계에서는 디자인과 개발 능력을 크게 필요로 하지는 않는다.
만약 사업 검증을 완료하고 많은 유저들이 사용하는 프로그램을 만들 때는 이제 어플을 사용할지 웹을 사용할지 기획단계에서 결정하게 된다. 그러면 이제 디자인이 필요하다. 어플을 만든다고 가정했을 때 어떤 페이지들을 만들 건지, 어떤 요소를 누르면 어느 페이지로 갈 건지 등 기획과 같이 정하고 콘셉트를 잡아 아이디어를 시각화한다. 그리고 그 시각적 결과물을 개발에 넘겨서 구현한다.
1. 디자인이 뭔지도 몰랐다.
처음 디자인이라는 단어를 들었을 때 '디자인..? 패션 디자인 말하는 건가..? 나 옷 관심도 없고 잘 입지도 못하는데'라는 생각이었다. 진짜 무지함의 끝판왕이었다. 실제 현업 디자이너 분들이 보실까 봐 부끄럽다. (만약 제가 틀리게 적은 부분이 있다면 말씀 부탁 드립니다..ㅎㅎ!) 서비스를 운영하며 디자인을 짧게 경험해 본 바로는 다음과 같다.
UI (User Interface): 사용자가 마주하는 화면이다. 폰트, 크기, 요소의 위치, 여백, 컬러감 등 딱 봤을 때 미적으로 보기 편한지, 메뉴나 버튼이 알아보기 쉬운지 등에 관련 있기 때문에 시각적인 부분에 신경을 많이 써야 한다.
UX (User Experience): 사용자 경험에 관련된 부분이다. 사용자가 서비스를 이용하면서 어느 부분에서 불편함을 느끼는지를 파악하고 그 부분을 알아내 즉각 수정해야 한다. 서비스를 이용하는 유저들에 대해 깊은 이해가 있어야 하고, 서비스 전반의 여정을 만들어낸다고 생각하면 된다.
어플이 어떻게 작동하는지를 나타낸 워크플로우
개인적으로 가장 기억에 남는 UX처음엔 UX에 관련해서 직관적으로 이해하기가 힘들었다. 사용자의 경험을 내가 어떻게 개선시킬 수 있는지가 궁금했는데 생각해 보니 로그인 화면이 떠올랐다. 대문자, 소문자, 숫자, 특수문자를 활용해야 할 때 저런 조건들을 만족해서 알아서 만드세요라는 경우가 있고, 한 조건을 충족할 때마다 위처럼 표시를 해주는 경우가 있다.
저렇게 위처럼 표시를 해주면 내가 특수문자를 넣었는지 안 넣었는지 바로 확인이 가능하고 비밀번호를 편하게 설정할 수 있다. 이런 거 하나하나가 세심하다는 생각이 든다. 이게 다 유저 리서치를 통해 나타난 결과물이구나.
2. 클론 디자인하기
이론 공부도 중요하지만 중요한 것은 실전이다. 아무리 사소한 거라도 꾸준히 하는 것이 중요하다고 생각한다. 검색했을 때 클론 디자인 할 때 템플릿 같은 게 있었고 그걸 그대로 만들어 첫 클론 디자인을 하였다.
단순히 화면을 따라한 거 아냐?라고 볼 수 있지만 의외로 깨닫는 것이 많다.
a. 대기업의 UX를 참고할 수 있다.
대기업은 전문가들이 모여 유저 리서치도 진행했을 것이고, 여러 테스트를 하면서 사용자에게 최적의 경험을 주고 있을 것이다. 그것을 그대로 따라 하면서 나도 대기업의 UX를 경험할 수 있었다.
아이콘의 크기를 왜 하필 저렇게 했는지, 이미지 내에서 북마크 아이콘을 우측상단에 20px의 여백을 두고 했는지, 폰트는 왜 저 크기로 했는지 난 알 수 없다. 그러나 저렇게 했을 때 사람들이 시각적으로 편하게 느끼는구나 정도는 알 수 있다. 그래서 내가 나중에 디자인을 할 때 저런 조건들을 참고해서 디자인할 수 있다.
b. 기능 공부가 된다.
이건 물론 당연한 거겠지만 이쁜 UI를 만들기 위해서 효율적으로 작업해 놓는 방법을 알게 된다. 개인적으로는 auto layout, style, constraint 등이 너무 신기하고 편한 기능이라는 것을 깨달았다. 아직은 사용하는데 미숙하지만, 이 부분을 좀 더 집중적으로 연습해보고 싶다.
그리고 개인적으로 아이콘은 그냥 플러그인 쓰면 될 것 같다는 생각이 들었다. 인강에서 아이콘을 만드는 방법도 알려줬는데 귀찮음 100%이고 효율적인 거 좋아하는 나로서는 아이콘을 만들 일이 있을까.. 싶긴 하다 ㅎㅎ
c. 섬세함이 늘어난다.
핸드폰 화면이 정해져 있다 보니 모든 요소들을 거의 1px 단위로 조정하는데 눈알 빠지는 줄 알았다. 전 직장에서 펀드 계약서 볼 때나 이렇게 유심하게 봤던 것 같은데 오랜만에 느끼는 감정이었다.
3. 현직 디자이너님의 피드백
진짜 한 줄기의 빛이었다. 첫 번째 시도이지만 디자이너님의 말을 듣고 다음에 다시 할 때 적용할 수 있는 부분들이 많아졌다. 칭찬도 해주셔서 좋았당 ㅎㅎ 몇 십 줄 분량에서 딱 2줄이지만! ^^
a. 최대한 도형을 쓰지 말고 프레임으로 작업해 볼 것
b. 한 캡처화면만 따라 해보지 말고, 스크롤 한 전체 화면을 전부 캡처해서 따라 해볼 것 (화면 구조, 콘텐츠 구정 공부하기 좋다)
c. 실선은 보통 1px로 한다는 것
d. 안드로이드, 아이폰 최적 해상도는 또 뭐야... 찾아봐야겠네
뭐든 배우는 건 너무 재밌고 가슴 뛰는 일인 것 같다 ㅎㅎ! 어제도 영상 기록 완료함!
