🧸 Daily UI 001
Prompt : Sign Up (가입하기)
다음 중 하나를 만들어보세요: 가입 페이지, 모달 창, 폼, 또는 앱 화면.
가입 대상은 자유롭게 상상해도 좋습니다. 예를 들어:
자원봉사 이벤트
콘테스트 등록
경품 이벤트 참여
등 다양한 상황에 맞춰 제작할 수 있습니다.
즉, 누군가가 무언가에 "가입(sign up)"하는 상황을 시각적으로 표현해보세요.
-
모달 창이 뭔데?
모달 창(Modal Window)은 웹사이트나 앱에서 자주 사용하는 UI 요소 중 하나예요.
쉽게 말하면, 화면 위에 겹쳐서 뜨는 작은 팝업 창이에요. 사용자의 주의를 집중시키기 위해 전체 화면을 흐리게 만들고 그 위에 중요한 정보를 보여주는 방식이죠. -
(예) "회원가입" 버튼을 누르면 화면 가운데 작은 창이 뜨면서 이름, 이메일을 입력하는 폼이 보이는 것!
탈퇴를 누르면 "정말 탈퇴하시겠습니까?"라고 뜨는 확인 창
이런 게 다 모달이에요! -
🔒 특징:
보통 배경은 흐려지고(사용자 주의 집중)
모달을 닫기 전까진 뒤에 있는 페이지를 건드릴 수 없어요
주로 로그인, 가입, 알림, 확인창 등에 사용돼요
🧸 결과물
 |  |
|---|
- [커리룸]의 어플 회원가입 창이다.
- 레퍼런스의 그리드를 활용하여 글자의 크기와 버튼의 크기, 여백들을 배치해봤다.
- 중요한 내용은 메인컬러를 사용하여 강조했다.
- 사용자가 어느 단계에 왔는지! 한눈에 알기 쉽도록 표현하고자 했다.
<궁금점>
- 하지만 여백 공식이 있는 것은 아닐지.. 어느 정도가 적당한지 모르겠다.. 눈대중으로 해야하는가?
- 자주 쓰는 서체(제목, 본문, 부가설명 등)스타일을 저장하는 방법이 있었던 것 같았는데 방법을 까먹어서 하나하나 편집했다. 어떻게 하더라?
- 휴대폰 기종별로 여백이 다르게 보이는데 무엇을 기준으로 디자인 해야하는가? 물론 유동적이겠지만 코딩으로 해결되는 것인가? 이런 UIUX 디자인 지식이 부족함을 느낀다...
