169 arrow left
위픽코퍼레이션

모바일 UI디자인하는 디대 기획자의 한 주#24

2022-08-18

안녕하세요.

웹 UI디자인이 끝나서 이제 모바일 UI디자인에 들어갈 차례입니다!

모바일은 또 웹과는 디자인이 달라서 다시 가이드를 잡고 가야하는데요.

웹같은 경우엔 양쪽 사이드 여백을 320픽셀로 잡아놓았어요! 모바일의 경우 폰트 사이즈나 여백의 사이즈를 웹과는 다르게 규정을 지어야한답니다.!

왜냐하면 모바일 기기에서 텍스트를 이해하는 것이 데스크톱에 비해 두 배가량 더 힘이 들어지기 때문인데요.

또한 모바일은 키보드와 마우스같이 외부 입력도구가 없어 손가락으로 스크롤하고 선택하고 텍스트를 입력해야해요.

따라서 모바일 사용에는 필요하지 않거나 중요도가 떨어지는 기능은 숨기거나 제거하여 기능을 최소화해야한답니다.

더해서 깊은 계층구조는 피하고 내비게이션 구조를 단순화 해야 합니다.

https://brunch.co.kr/@chulhochoiucj0/8

해당 브런치 글에서 모바일 디자인을 할 때 알아두면 좋은 고려사항들이 많이 있었습니다.

  1. 모바일에서는 모달 상태의 경고창 alert 상단 우측 “X”버튼은 노출하지 않습니다.
  2. 모바일에서 창 닫기 버튼은 우측 상단보다 하단이 사용성이 좋습니다. 그렇기에 풀프레임 대화창dialog에 “X”버튼 (닫기 버튼)은 왼쪽 상단을 권장합니다.
  3. 모바일에서 사용자의 정보 입력을 요구하는 대화창에서는 우측 상단에 “X”버튼은 우측에 놓지 않고 좌측을 권장합니다.
  4. 긍정적인 액션 버튼은 우측에 배치합니다.
  5. 스크롤을 고려하여 콘텐츠의 그리드를 화면 하단에 정확하게 정렬하지 마십시오.
  6. 버튼 스타일은 중요도에 맞게 사용해야 합니다.
  7. 충분한 여백을 활용하고 핵심 콘텐츠에 집중해야합니다.

등등.. 여러 꿀팁들이 가득 담겨있었네요ㅎㅎ

곧 6개월간의 인턴이 끝나가기에.. 해솔님께서 밥과 커피를 사주셨답니다ㅎㅎ

새로 오픈한 신라다랑원? 에 가보았는데 맛있었어요!

그 바로 앞에 있는 카페에 가보았는데 간판이 없더라고요..?? 들어가서 알게 된 커피집 이름.. 로즈,,

점심시간이 넘 짧아서 10분 머물다 바로 후다닥 나오게 되었네요ㅎㅎ

이렇게 한 주를 마무리하고 이제 진짜로 7일정도 남았는데 인턴이 진짜 끝나가네요.. 아쉽기도 하면서 다시 학교 공부도 하고 싶기도 하네요ㅎㅎ

이제 남은 7일도 홧팅@!

위픽의 글 더보기
[채용] 위픽과 함께 할 마케팅AE를 찾습니다.
[채용] 위픽과 함께 할 퍼포먼스 마케터를 찾습니다.
[부스터팀] 비전공자 마케터 성장일지 #마지막
[부스터팀] 위픽 마케팅 인턴 성장기 #9
[부스터팀] 위픽 마케팅 인턴 성장기 #8
[부스터팀] 비전공자 마케터 성장일지 #8
성장기 더보기
성장기 #1 <회사에서 나를 어떻게 규정하는가.>
[캠페인팀] 디자이너 인턴 성장기 #3
위픽 숲의 다섯가지 비밀
마케팅 인턴 성장기 4주차
[캠페인팀] 디자이너 인턴 성장기 #2
마케팅 인턴 성장기 3주차