[본캠프 2주차] 수요일 TIL

10/30 일일 목표📝

 

피그마 7주차까지 완강

피그마 개인숙제

 

---

 

 

📖 오늘 배운 내용

 

다양한 환경에서의 UI차이

• UI에 차이를 두기 위해서는 UI를 사용하는 목적과 기능을 모두 고려하여 다르게 설정해야 함
• 앱, 웹 이라고 무조건 정해진 디자인이 있지는 않음
• 디자이너가 판단했을 때 어떻게 디자인 해야하는지, 사용자에게 좋은 경험을 남길 수 있는지 고민해야 함

 

IOS와 안드로이드의 UI차이점, 앱과 모바일 웹에서의 UI차이점 조사

 

조사를 하면서 여러가지 앱을 보았다. 앱들을 살펴보면서 어떤점이 안드로이드와 다른지 살펴보았다.

그런데 국내앱만 조사해서 그런지 안드로이드에 맞춰서 IOS 디자인을 한건지 잘 모르겠지만 안드로이드의 하단바에 맞춰서 밑에 공간을 넓게 준 앱들이 많이 있었다.

 

로그인 창은 애플은 애플로그인을 위쪽 중점을 둔다면, 안드로이드는 구글로그인이나 애플 로그인은 밑에 작게 넣어놓는 것이 큰 차이점 인 것 같다. 자주사용하는 로그인버튼을 OS에 따라서 다르게 넣는다는 점은 사용자의 편의성을 고려하는 것 같다.

 

 

 

 

와이어프레임이란?

• 어떤식으로 만들지 논의를 한 후에는, 정식 디자인 전단계에 하는 스케치
• 크게크게, 전체적으로 형태와 방향을 잡아보는 단계
• 선으로 이어져 있어 와이어프레임이라고 부름

 

와이어프레임이 중요한 이유?

• 팀원 간의 다른 생각을 통일할 수 있고 협업을 원활하게 함
• 디자인을 관리하기 쉽고, 단순한 형태로 만들어서 디자인의 자세한 형태를 수정하면서 잡아가기가 좋음

가상OTT서비스 와이어프레임

 

 

와이어프레임 플러그인을 사용해서 가져다가 금방금방 원하는대로 넣어보니 와이어프레임을 금방 잡을 수 있었다. 

 

저번 팀프로젝트 과제에서는 와이어프레임 과정이 없어서, 완성된 디자인을 가지고 팀원들의 생각과 수정을 거치다보니 원래했던 디자인이 망가지기도하고 중구난방이어서 보기 어려웠다.

확실히 와이어프레임 단계에서 같이 살펴보면서 수정을하고 형태를 잡아가면 나중에 완성된 디자인 단계에서도 수정이 적어져 시간단축이 될 것 같다는 생각이 들었다.

 

 

 

프로토타입 만들어보기

 

이미지 슬라이드 과제

 

 

7주차 숙제에서 이미지 슬라이드를 만드는 데, 양옆으로 슬라이드 되는게 되지 않아서 혼자서 엄청나게 고민했다.....

나는 사진프레임에 스크롤을 적용하면 화면에서 움직일 것이라고 생각하고 사진프레임에 스크롤을 설정했더니 자꾸 오류가 뜨는것이다.

 

화면은 움직이는데 저 사진만 움직이지가 않고 화면이 통째로 움직여서 상단이랑 하단바가 같이 움직이지 않는것이었다. 그런데 내가 간과한 사실이 하나있었다... 콘텐츠가 움직이는 것이 아니라 화면이 움직인다는 점!!!

 

 

 

상단바와 하단바를 픽스로 설정해 고정해주고, 화면 스크롤을 Horizontal 로 설정해주니 성공..!!

혼자서 열심히 생각하다가 결과를 얻게 되어서 이제 잊어버릴일은 없을 것 같다😂

 

 

 

---

 

 

👩‍🏫 오늘 진행하며 어려웠던 부분

 

평소에 갤럭시를 사용해서 안드로이드 UI만 많이 봐왔는데, 디자인을 하려면 다양한 OS에서의 디자인 UI도 고려해야 한다는 점을 알게된 것 같다. 평소 비교해 볼 일이 많이 없었는데 이번 과제를 하면서 많이 찾아보게되어서 비슷한 점도 많지만 사용자의 편의를 생각하여 다르게 디자인 된 점도 많이 알게된 것 같다.

프로토타입 예전에 XD에서 몇번 해봐서 그래도 조금은 알고 있다고 생각했는데 원하는대로 작동이 되지않으니 정말 머리가 아팠다....🤯 강의를 다시 들어보면서 남은 2일동안 복습을 꾸준히 하고, 혼자 만져보면서 실습해봐야겠다고 생각했다.

 

 

 

 

---

 

👀 어려웠던 부분을 어떻게 해결했을까?

 

혼자서 이리저리 생각해보고, 구글에도 검색해보고 하니 다행히 해결책이 나왔다.

역시 모든 기능을 해보려면 많이 실습해보고 공부해야 한다는게 맞다...

대충 넘겨선 안되고 복습 또 복습하도록 해야겠다.