카테고리 없음

[Today I Learned] 환경에 따른 UI 차이와 와이어프레임 - 24.10.30

somlogg 2024. 10. 30. 20:19
수요일 - 목표
📍디자인 카타 발표하기
📍피그마 활용법 강의 듣기
📍피그마 활용법 과제&실습 하기

👀 실습 또 실습

디자인 카타에서 발표도 진행하고 나머지 2강 듣기!! 그런데 6주차 강의 자체는 짧은데 과제가 시간이 오래 걸려서 7강을 다 듣지는 못 했다. 레퍼런스를 잘 서치하는 것도 디자이너로써 필요한 역량 중의 하나인데 나는 서치하는 능력이 정말 별로인가보다..ㅎ 실습과 과제를 하고 자료를 찾다보니 하루가 훌쩍 가버렸다. 

 

▶️디자인 카타

어제 하지 못 한 디자인 카타 발표를 진행했는데, 어제 생각했던대로 내가 찾아온 페이지는 랜딩페이지라고 부르기에는 적합하지 않았다. 사용자의 호기심을 한 눈에 끌으며 사용자의 행위를 강력하게 유도해야하는 것이 랜딩페이지인데 오늘의 집은 복잡한 사용자 행동을 유도해서 랜딩 페이지라기 보다는 그냥 잘 만들어진 웹페이지였고, dopplepress 또한 잘 구성된 브랜딩 웹페이지라는 피드백을 받았다. 카타시간에 수많은 사례를 듣고 피드백을 통해서 하나의 개념이 자리잡히는 과정이 너무 좋았고, 가져온 사례의 아쉬운 점을 지적하는 사람들이 대단해보였다..! 나도 인사이트를 빨리 늘려서 척척박사가 되고싶다👩‍🔬👩‍🔬👩‍🔬👩‍🔬👩‍🔬

▶️Figma 활용법 강의 수강 6주차

웹과 앱의 특성

 

앱과 웹의 특성 비교
앱과 모바일 웹의 차이가 있을거라고 생각하지 못 했었다. 둘 다 모바일 기기를 통해 보여지는 건데 왜 다르지? 하는 의문을 갖고 보니 꽤 많은 차이가 있었다. 일단 밑에 주소 창이 있어서 웹 화면이 상대적으로 작게 보인다. 물론 스크롤을 하면 사라지기도 하지만 주소창이 있을때와 없을때의 레이아웃의 차이가 없게끔 설계해야 한다. 

바텀시트

바텀 시트는 웹과 앱 둘 있을 수 있지만 모바일 웹에서는 사용하기 까다롭다는 특징이 있다. 바텀 시트를 드래그해서 온오프하는 과정에서 웹 브라우저의 기본적인 UI와 충돌할 가능성이 있기 때문에 디자이너는 잘 생각해서 선택해야 한다.

 

안드로이드와 ios 운영체계에 따른 UI 차이점도 세세해서 찾는 재미가 있었다. 화면 비율과 안드로이드의 경우 밑에 뒤로가기 버튼이 있어 그 차이에 따라 레이아웃을 조금 신경써야된다는 것은 알았지만 로그인할 때 우선순위가 다른 점은 정말 디테일한 부분이라 감탄했다.

▶️안드로이드& ios UI 차이점 

이번 회차 과제는 안드로이드와 ios UI 차이점을 찾아서 정리하고 이유를 서술하는 것이었는데, 나는 아이폰이라 ios UI만 확인할 수 있고, 서치를 해도 ios 기반으로 설명되는 것이 많아서 어떻게 찾아야할지 막막했는다. 그러던 중에 튜터님이 참고할 만한 사이트를 추천해주셔서 여러가지 어플을 확인해볼 수 있어서 아주 좋았다. 
https://mobbin.com/browse/ios/apps
대부분 해외 어플이었는데 해외 어플은 ios를 기반으로 만들고 안드로이드에 적용했는지 생각보다 다른 점을 확인하기 어려워서 아쉬웠다. 우리나라 어플은 훨씬 차이를 확인하기 쉬웠을 거 같은데..! 기회가 된다면 안드로이드 폰으로 더 자세하게 탐구해보고 싶다.

 

 

안드로이드와 ios UI 차이점 과제

 

▶️앱&웹 UI 차이점

앱과 모바일 웹 UI 차이점이 명확한 페이지를 서치하는데에 시간이 조금 걸렸다.. 내 인사이트가 풍부했다면 바로바로 떠오를텐데,,ㅜ 앞으로 UI들을 더 살펴보면서 살아야지. 특히 파파고가 앱과 모바일 웹의 차이가 커서 신기했다. 

앱과 모바일 웹 UI 차이점 과제

 

▶️와이어프레임

와이어프레임을 만드는 이유 

👪 팀원 간의 다른 생각을 통일할 수 있고 협업을 원활하게 해요 글로 된 문서만 보고 디자인과 개발을 하게 되면, 서로 생각이 조금씩 달라서 문제가 생길 수 있어요. 아무리 단순한 디자인이더라도 화면의 형태를 같이 보면서 이해가 다른 부분을 줄일 수 있어요.

🎨 디자인을 관리하기 쉽고, 불필요한 부분에 시선을 뺏기지 않아요 처음부터 너무 완성된 UI로 작업하게 되면 중요한 사용자 시나리오에 집중하기 어렵고, 디자인 변경이나 수정할 때 빠르게 변경하기 힘들어요. 최대한 단순한 형태로 중요한 흐름만 만든다면 집중하기도 좋고, 디자인 방향을 조금씩 잡아가면서 완성도를 끌어올릴 수 있어요.

⭐ 습관 형성 모델을 반복적으로 실험해 볼 수 있어요 와이어프레임을 만드는 이유 중 가장 중요한 것은, 참여 전략과 북극성 지표를 토대로 설계한 습관 형성 모델이 잘 작동할 수 있는지를 확인하는 것이 필요하기 때문이에요. 습관이 형성될 수 있도록 사용자 시나리오를 작성하고, 와이어프레임을 통해 그 과정이 매끄러운지, 부족한 건 없는지를 빠르게 검증해 볼 수 있어요.

 

와이어 프레임의 개념

피그마는 정말 편리한 툴이다. 와이어프레임 또한 플러그인이 있다. 이 플러그인을 사용해서 6주차 과제를 진행했다.
https://www.figma.com/community/file/1148152271646787632
https://www.figma.com/community/file/1075811850250564922

ott 와이어프레임 과제

티빙 UI를 참고해서 만들었다. 심화과제로 구독 다이얼로그 창도 만들었는데 플러그인이 있기도 하고 전 강의에서 반복해서 실습했던 내용이라 어렵지 않았다.

굿즈 커머스 와이어프레임 과제

아이디어스 UI를 참고해서 만들었다. 확실히 ott UI와의 차이를 느낄 수 있어서 신기했다. 항상 느끼는 것이지만 UI 디자인이 편집 디자인과 정말 유사한 부분이 많다. 와이어프레임을 구성하는 것도 편집 디자인에서도 했던 방식이다. 이름은 따로 없지만 레이아웃과 이미지가 들어갈 위치 정도를 가볍게 정리하고 진행한다. 배웠던게 도움이 되어서 좋다.

 

💭 

실습 과제 실습 과제 실습 기절 과제 
2주차 밖에 남지 않아서 빠르게 완강하고 어려운 부분을 복습할 수 있을 줄 알았는데 실습이랑 과제가 오래 걸려서 한 주 분량의 과제 밖에 듣지 못 했다..! 마지막 주 과제도 어렵다던데 무서버😱