카테고리 없음

내배캠 - 10/31 TIL

장해진 2024. 10. 31. 20:00

디자인 카타 - 웹 사이트 

웹사이트의 중요성 : 온라인으로 정보를 제공하는 시대에 꼭 필요한 수단, 사용자가 사이트를 사용하면서 긍정적인 경험을 갖는 것을 우선으로 해야한다!(➡️ 웹사이트의 구조를 잘 만들어야 한다. / 카테고라이징을 잘 해야함! & 네비게이션이 잘 되어 있어야 함 / 탐색이 간편해야 한다. ) 

ex) 쇼핑몰에 들어가면 제품 목록이 많다. - 신발(운동화, 슬리퍼 등등), 아우터, 바지(5부 바지, 슬랙스 등등) / 이렇게 카테고리를 잘 나누면 좋음! 

오늘 찾은 레퍼런스 - unplash, 구루미 캠스터디

찾은 기준 : 해당 사이트를 들어온 사람들의 성향을 잘 고려했는가?  

 

Unplash(무료 이미지 제공 어플) : 나는 사진 찍는게 취미인 사람이기 때문에 풍경, 동물, 인물 사진 각각 어떻게 찍어야할지 레퍼런스를 찾아보는 용도로 사용하던 사이트였다. 사이트에 들어가서 사용자(나!)가 할 일은 많지 않다! 카테고리 중에 원하는 카테고리 고르기 & 맘에 드는 사진 고르기 ➡️ unplash는 그러한 목적만 딱 담아서 좋았다 카테고릴 볼 수 있는 방법도 여러 곳에 배치되어 있고 불필요한 요소를 빼고 오로지 사진만 바둑판 형식으로 나열되어 있어서 간편하다 생각했다. 

 

구루미 캠스터디 : 한동안 토익 공부를 할 때 이용했던 사이트! 같은 목표를 가진 사람들과 스터디를 하면 훨씬 높은 집중력과 학습 효과를 일으킨다. 그런 점에서 스터디를 하고 싶지만 오프라인은 부담스럽다고 생각했을 때 이용하는 사이트이다. 

공부를 하러 들어왔기 때문에 컨텐츠가 너무 많은 것보단 필요한 것만 있단 점이 좋았다. 대부분 초면인 사람들이 있고 온라인의 특성상 무단 녹화나 캡쳐 등의 위험이 있기 때문에 얼굴을 가릴 수 있는 수단으로 구루미(구름)이라는 캐릭터를 만들어서 스티커를 제작한 점도 좋았다. 

추가로 결제를 하면 뽀모도로(25분간 공부, 5분 휴식) 시계나, 다양한 스티커, 타이머 등의 아이템을 쓸 수 있고 방의 제한된 인원을 늘릴 수 있다! 

 

Figma 활용법(2) - 2주차 숙제(와이어프레임), 3주차

와이어 프레임 만들기

와이어 프레임 그리기 실습

 

굿즈 커머스 서비스로 KREAM과 29CM를 참고하여 와이어프레임을 제작했다.

심화 숙제로 품절 상품의 재입고 알림 제안 다이얼로그를 추가했다! 

제품 상세페이지를 그리면서 느낀게 상품명, 리뷰, 가격, 사이즈, 색상의 순서를 어떻게 배치했을 때 사용자에게 가장 편한가?가 고민이었다.

 

KREAM의 경우엔 신발 가격의 변동이 있는 어플의 특성상 가격을 가장 위에 배치한 것 같았다. 

그 다음으로 제품명, 사이즈를 배치하였고 신발 색상은 제품 대표사진 바로 아래에 배치하였다. 

반면, 29CM는 제품명, 리뷰, 색상, 사이즈, 가격 순으로 배치하였다. 

 

나는 보통 제품명을 확인하고 리뷰와 가격을 보고나서 맘에 들면 색상과 사이즈가 있는지 확인하는 편이어서 순서를 그렇게 배치하였다. 

재입고 알림 다이얼로그는 무신사의 재입고 알림 서비스를 참고하여 문구를 추가했다. 

 

3주차 강의 

프로토타입

  • Lo-fi(Low fidelity) : 낮은 단계의 프로토타입(와이어프레임도 일종의 낮은 단계 프로토타입으로 볼 수 있음)
  • Hi-fi : 높은 단계의 프로토타입, 실제 제품과 거의 같거나 유사한 수준 
  • 피그마 프로토타입 
    • 장점 : 직관적이고, 빠르게 만들 수 있다
    • 단점 : 실제 제품처럼 동작하는걸 만들긴 어렵다, 효율성을 떨어뜨린다.
    • 핫스팟(시작점), 커넥션, 종착점

트리거와 액션

  • 트리거 : ~하면(클릭하면)

기기에 따라 항목이 다르다!

 

 

 

While hovering : 마우스가 머무를 때

 

Mouse enter : 마우스가 들어갔을 때

Mouse leave : 마우스가 떠났을 때

 

Mouse down : 마우스 한 번 클릭하면 끝 

Mouse up : 마우스 클릭했다 떼면 끝

 

After delay : 1s=1000ms, 3초 이후에 실행하고 싶다면 3000ms

 

 

 

 

 

  • 액션 : ~한다.(이동한다

 

 

 

Navigate to : 페이지 이동

Change to : 컴포넌트의 베리언츠 변경 

Back : 바로 직전 화면으로 이동 

Scroll to : 특정 지점으로 이동(현재 프레임 안에서만 가능) 

Open link :피그마 내에서 링크로 이동 

Open overlay : 현재 프로토타입 화면에 라이트박스와 프레임을 보여주는 액션

Swap overlay : 라이트박스를 유지한 채 다른 프레임으로 교체하는 액션

Close overlay : 라이트박스를 닫는 액션 

 

Set variable : 변수를 특정값으로 바꿀 수 있음 

 

 

 

 

  • 애니메이션 : 어떻게? 

프로토타입 실습

 

애니메이션

  • 버튼을 누르면, (천천히 오른쪽에서 왼쪽으로) 화면이 (밀려 들어온다).
  • 애니메이션의 종류 

instant
Dissolve
Smart animate
Move in/out
Push
Slide in/out

  • 스마트 애니메이트(매우 중요!!!) 
    • 작동하는 요소의 이름이 같은지
    • 레이어 구조가 동일한지 (오토레이아웃을 한 번 더 감쌌다던지 이런 것도 안 된다~)
  • 스크롤 컨테이너 : 컨테이너보다 내용이 더 길어야 프로토타입에서 스크롤을 할 수 있다 
  • 포지션 : 앱과 웹사이트에 있는 요소들 중 헤더나, 앱의 버튼처럼 위치가 고정된 요소들은 포지션을 조정하여 만든다
    • Static : 스크롤 따라 움직이는 것 
    • Fixed : 화면이 바뀌거나 스크롤하더라도 항상 고정된 위치에 있음! 
    • Absolute : Fixed는 화면 전체를 기준으로 하지만, Absolute는 부모 컨테이너를 기준으로 함 / 디자인 탭에서 Absolute position 설정하면 됨
    • Sticky : 스크롤을 따라 움직이다가, 특정 위치부터는 상단에 고정됨

포지션의 위치
header와 tab은 컨스트레인츠 top으로 Fixed는 bottom으로 설정 가로는 L+R이나 center

  • 오버레이 만들기 

위치를 어디에 둘거니?
바깥을 클릭했을 때 닫을거니? / 백그라운드 색 넣을거니?
회원가입을 누르면 오버레이가 닫힌다~
플로우 스타팅 포인트 이용하면 프레젠테이션 가능

✅ 과제

  • 이미지 슬라이드는 케러셀(Carousel)이라고 부른다! 

과제 완

당근 앱의 글쓰기 버튼은 while hovering - on click인줄 알았는데 mouse down - up 이었다

작동은 똑같이 하는데 이론상 마우스를 만졌다가 뗐을 때 팝업이 뜨는거니까 이해가 갔다! 

 

첫번째 과제인 케러셀 화면 만들기 중에 계속 가로로 스크롤시, 위아래로 움직이는 현상이 나타났다.

전에 프로젝트에서 은형님이 성공하셨던게 기억나 여쭤봤다! 

사진 프레임을 만들고 스크롤 컨테이너 안에 넣어 스크롤이 되는 범위를 지정해주고 스크롤 컨테이너에 horizontal을 설정해봤다! 그랬더니 니 훨씬 덜 흔들렸고, 내가 프로토타입을 아이폰 x로 설정해놔서(프레임은 13mini였삼...;;) 유독 흔들린 것 같다!

이것도 은형님이 알려주셨다..짱..!👍

 

회고

 

🚨 어려웠던 점 

  • 오늘 코칭 프로그램을 진행했다.. 질문을 몇 개 정리해가긴 했지만 상담이 원활하게 진행되진 않은 것 같다. 나에게 무엇이 부족한지, 뭘 하고 싶은지 생각을 더 해봐야 정말 궁금한 것들이 생길 것 같은 느낌..! 앞으로도 두 번 정도 기회가 남아있다고 했는데 그 때쯤은 조금 더 구체적으로 계획을 짜봐야지 !!
  • 프로토타입 애니메이션에서 while hovering과 mouse down, up이 어떨 때 사용되는건지 헷갈린다. 레퍼런스를 좀 더 찾아봐야겠다.
  • 나는 왜 uiux를 선택했는가?를 이야기로 잘 풀어가는 것을 고민해봐야겠다.
    • 지금 생각나는건 평소에 아이폰 자체에 있는 기본 어플을 잘 사용하지 않고 Timetree 같은 캘린더 어플이나, 공부기록 어플, 일기장 등등 새로 나오는 어플들을 많이 써보는 편이었다. 정말 좋은 어플은 자연스레 기본 어플을 대체하여 사용했지만 깔아놓고 막상 사용하지 않은 어플도 엄청 많았다.(지금 uiux를 배워보니 ui적으로나 ux적으로 부족한 부분들이 불편하게 다가와서 그랬구나!) 좋은 어플들은 도대체 누가 어떻게 만들고, 어떻게 사고하면 이런 결과물을 만드나? 하는 생각들이 들었다. 그러면서 uiux에 관심을 갖게 됐다
    • 상대를, 사용자를 생각하고 배려하는 마음에서 프로덕트를 만들어 좋은 피드백을 받는다면? 엄청나게 뿌듯할 것 같았다. 이걸 왜 이렇게 만들었을까? 불편하다. 하는 생각에서 그치지 않고 더 나은 방향으로 결과를 만들어 나가는 일이라 생각해서 좋았다.
  • 케러셀!!! 미니 프로젝트 때 포기했던...케러셀에 인디케이터 넣기를 케러셀이란 단어를 알게 되니 정보들이 더 잘 서치가 되어서 다시 시도해봤다~ 하지만...실패! 흠.. 스마트 애니메이트가 적용이 안 되는데 뭔가 인디케이터 레이어가 꼬인 것 같기도 하고,,, 내일은 시간이 많을테니 한 번 날 잡고 다시 해봐야지 

✅ 해야할 것

  • 코치님께서 국내 디자인 레퍼런스 사이트를 정말 많이 봐야한다고 말씀해주셨다. 사람들이 만든 페이지들을 클론 디자인 해보면서 관점을 넓히는 것이 중요하다! 이번주는 유아이볼 사이트를 찾아봐야지(좋은 사이트가 많고 자료도 많아서 하나에 집중하기가 힘들다) 
  • 내일부터는 UX책을 10분이라도 읽는 것이 목표! 하루 5분 UX가 도착했으니 함 읽어보기로..!
  • 점심에 10분이라도 걷자! 체력을 위해서...

👍 잘한 점

  • 잘한 점...오늘은 딱히 없는 듯 하다 ㅎ 하루종일 공부 열시미 했다^^....