CH3. UXUI 디자인 입문 - 3일차 TIL

✅241120

· 디자인카타 발제 (모달 팝업 담당)

· UXUI 기획 및 리서치 5주차 수강 & 과제

· 밍글링(가을운동회) 참여!! 

· CH2 개인과제 피드백 받은 부분 디벨롭하기

---

📋 학습 내용

 

• 5주차 과제: 커머스 서비스 로그인/회원가입 과정의 사용성 테스트에서 참여자가 수행할 테스크를 선정해보세요.

1. 커머스 서비스에 신규 회원으로 가입해 보세요.
2. 계정을 카카오와 연동해 보세요.
3. 계정을 네이버 이메일과 연동해 보세요.
4. 자동 로그인 설정을 해보세요.
5. 아이디 찾기로 아이디를 확인해 보세요.
6. 비밀번호 찾기로 비밀번호를 재설정 해보세요.
7. 재설정한 비밀번호로 다시 로그인해 보세요.
   
   

 

 

• CH2 개인과제 피드백 받은 부분 디벨롭하기

2배수 4배수 그리드를 활용해보라는 피드백을 받았었는데 가로가 375인 경우 2배수로 잡으면 1픽샐 남는 부분을 어떻게 처리해야 하지는 모르겠다... ^_ㅠ 그래서 일단 코멘트 달아놓음

 

 

 

왼쪽(change to): 이동하기 버튼 클릭해도 인터렉션이 실행 안 됨 / 오른쪽(open overlay): 다이얼로그와 바텀시트 동시에 보임

그리고 어제는 해결 못했던 장바구니 이동 부분 오늘 드디어 해결했다!

 

기존에는 장바구니 버튼 클릭 → 장바구니에 담았습니다 다이얼로그로 넘어가는 부분을 베리언츠에서 바로 인터렉션을 추가해 On tap - Change to로 넘어가게 했었는데 이렇게 했더니 다이얼로그에서 이동하기 버튼을 눌렀을 때 장바구니로 넘어가는 인터렉션이 실행이 안됐다.  이 부분 왜 그런지 이유는 아직 모르겠음...

 

그렇다고 액션을 오버레이로 지정하면 바텀시트와 다이얼로그가 동시에 보이는 점이 문제였다....

 

다이얼로그의 라이트박스 아래에 상세페이지를 배경으로 깔아두고 navigate to로 넘어가게 하는 것도 생각해봤지만,

만약 상세페이지에서 스크롤을 내리다가 장바구니 버튼을 누르면 다이얼로그로 넘어갔을 때 갑자기 부모창이 바뀌어 보인다는 점이 마음에 안들어서 계속 고민하다가

.

.

.

 

 

액션을 Swap overlay로 지정하면 바텀시트는 자연스럽게 사라지고

기존 상세페이지 창 위에 다이얼로그 창이 올라간다는걸 발견했다!!

 

 

 

 

 

아주 스무스하게 넘어가짐 낄낄,, 뿌듯하다

 

 

---

 

❇️TIL

• 오늘 새롭게 알게된 내용
  • 바텀시트에서 다이얼로그로 넘어가는 인터렉션 (바텀시트는 사라지고, 다이얼로그는 나타나게)
    • 액션을 Swap overlay로 지정하면 된다!!
• 오늘 어려웠던 점과 해결 방안
  • 2배수 4배수 그리드를 사용하면 꼭 1픽셀이 남는 문제
    
    • 아직 해결 못했다.. 면담 때 튜터님께 여쭤볼 예정
• 오늘의 회고 및 느낀 점, 앞으로의 다짐
  • 어제도 해결이 안돼서 거의 끙끙,, 앓았던 문제를 해결해서 너무너무 기쁘다 ^~^
  • 오늘 가을 운동회 재미있었다. 좀비게임 또 하고싶음,, 다음 시즌도 있으면 좋겠다!!!🤩