Mini Dice 디자인 (Raw Markdown)

2022년, [Mini Dice](https://www.mini-dice.com)을 제작하며 UI/UX 디자인을 처음으로 직접 해 보았다.

마치 진짜 메신저를 사용하는 듯한 디자인과 마이크로 인터랙션 경험을 구현하였다. 

# 디자인

:img[]{src="https://blog.atj.sh/post-attachments/v/01960547-7755-7053-a27e-3a11a2cef440" .full-unrounded} 
:img[]{src="https://blog.atj.sh/post-attachments/v/01960547-948a-7390-b2a6-6d7f28632874" .half}:img[]{src="https://blog.atj.sh/post-attachments/v/01960547-b2ef-7ee2-9370-a1b36917a890" .half} 

:img[]{src="https://blog.atj.sh/post-attachments/v/01960547-d4d7-7722-a2e0-0055604a51b2" .full-unrounded} 

:img[]{src="https://blog.atj.sh/post-attachments/v/01960547-f1aa-7030-b7e6-94ea7a6d933c" .half}:img[]{src="https://blog.atj.sh/post-attachments/v/01960548-0341-75c3-a13d-dc341e235ca1" .half}

# 모바일 레이아웃

Mini Dice에 사용된 모든 페이지 디자인은 모바일 기기의 사용 경험을 고려하여 제작되었다.

:img[]{src="https://blog.atj.sh/post-attachments/v/0196054a-220f-7ac2-9411-ad69046ca990" .full-unrounded}

# 다크 모드

올빼미족을 위한 다크 모드 디자인을 자동으로 사용할 수 있다.

![](https://blog.atj.sh/post-attachments/v/0196053f-9fe9-7e21-9e65-7cb95f2ba73c)

# 초창기 계획

사용 툴: Adobe XD

:img[]{src="https://blog.atj.sh/post-attachments/v/01960540-5713-71d1-8179-e5174a00c623" .full-unrounded} 
:img[]{src="https://blog.atj.sh/post-attachments/v/01960540-693e-74a2-bbcf-97d3eb930f40" .size-2-3  .center} 

:img[]{src="https://blog.atj.sh/post-attachments/v/01960540-1714-71a2-836e-01cfb0a998fc" .size-2-3 .center} 

:img[]{src="https://blog.atj.sh/post-attachments/v/01960540-3190-70d1-9836-eace0b25422c" .size-2-3 .center} 

:img[]{src="https://blog.atj.sh/post-attachments/v/01960540-44a0-7403-a1d8-0689987aac46" .size-2-3 .center}

# 디자인 영감

채팅창 디자인의 영감을 주로 받은 곳:

- [Meta의 Instagram - Direct Messenger 기능 내 채팅창 디자인](https://about.instagram.com/ko-kr/features/direct)
- [Apple의 iMessage - Messages for Business 전용 채팅창 디자인](https://www.apple.com/ios/business-chat/)

:img[]{src="https://blog.atj.sh/post-attachments/v/01960565-6074-70d0-81e3-2eeb6a212a84" .half}:img[]{src="https://blog.atj.sh/post-attachments/v/01960565-5553-78c3-93e2-397cf7dd0377" .half}


그 외 디자인을 구성하기 위한 영감은 아래와 같았다.
- [Apple의 Apple Developer 웹사이트 - Latest News 페이지](https://developer.apple.com/news/)를 영감으로 "새로운 소식" 페이지를 디자인했다.
- "알림 센터" 페이지 디자인은 [Apple의 iOS Notification Center](https://support.apple.com/en-us/108781)를 참고하였다.

:img[]{src="https://blog.atj.sh/post-attachments/v/01960565-33a0-7412-adac-abd2e5d436fc" .size-2-3}:img[]{src="https://blog.atj.sh/post-attachments/v/01960565-6ac6-7432-9ecf-b7a3f7e36bdb" .size-1-3}

# 둘러보기

[Mini Dice 소개](https://blog.atj.sh/post/8)