[제로베이스 UI/UX 파트타임 스쿨] 11주차 - (토) 스플래쉬

제로베이스 76일차 학습노트이다.
오늘은 컴포넌트 가이드라인 실습 중 스플래쉬(Splash) 화면에 대해 배웠고, 이를 기반으로 하트가 키포인트인 쇼핑몰 앱의 스플래쉬 화면을 Adobe XD로 직접 제작해보았다. 스플래쉬는 앱의 첫인상을 결정짓는 중요한 시각 요소로, 브랜드의 정체성과 분위기를 가장 직관적으로 전달하는 화면이다. 이번 실습에서는 쇼핑몰의 특성과 감성적 요소를 시각적으로 표현하는 방법에 집중했다.

---

오늘의 강의 내용

 

1. 스플래쉬 화면 (Splash Screen)
스플래쉬는 앱 실행 시 사용자에게 가장 먼저 보이는 화면으로, 로딩 시간 동안 사용자에게 시각적 안정감을 주며 브랜드 아이덴티티를 전달하는 역할을 한다. 이번 실습에서는 하트를 키 비주얼(Key Visual)로 설정해 사용자에게 친근하고 사랑스러운 브랜드 이미지를 전달하도록 구성했다.

 

중앙에는 눈에 띄는 하트 그래픽을 배치해 시선을 끌고, 그 아래에 브랜드명인 MY SHOP이라는 텍스트를 심플하게 배치하여 브랜드를 각인시킬 수 있도록 디자인했다. 배경 컬러는 하트와 어울리는 따뜻한 계열을 사용하여 전체적인 톤을 감성적으로 통일했다. 또한, 스플래쉬 화면에서 바로 회원가입으로 연결되는 흐름을 제공하기 위해 회원가입 버튼도 함께 구성했다. 너무 많은 정보를 담지 않되, 사용자에게 다음 행동을 유도하는 UI 요소를 넣어 사용자 흐름이 끊기지 않도록 설계한 점이 인상 깊었다. 버튼은 명도 대비가 높고 터치 영역이 넉넉한 형태로 구성하여 가독성과 접근성을 확보했다.

 

Adobe XD에서는 요소 간 정렬과 비율, 여백을 8dp 기준에 따라 정돈해 배치했고, 다양한 해상도에서 레이아웃이 어떻게 반응하는지도 고려해보았다.

---

오늘 학습한 스플래쉬 화면은 쇼핑몰이나 브랜드 앱에서 첫 화면을 설계할 때 유용하게 활용될 수 있다. 특히 하트와 같은 키 비주얼을 중심으로 브랜드 메시지를 명확하게 전달하는 방법, 그리고 스플래쉬에서 회원가입 등 다음 동선으로 자연스럽게 연결하는 UI 구성은 실제 실무 프로젝트에서도 자주 사용될 수 있을 것 같다.

 

이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.