기본적인 팝업UI을 만들어보자

작업 준비 과정

1. 팝업창의 구조
2. 작업 방향 설정 및 UI 기획
3. 레이어 정리

팝업창의 구조

저번에도 말했듯이 팝업창의 구조는 제목, 내용, 버튼의 3중 구조로 되어있다.

작업 방향 설정 및 UI 기획

1. 공통 팝업(게임 종료 등)
2. 입력 팝업(닉네임 생성 등, 입력창이 있다.)
3. 약관 동의 팝업(개인 정보 및 약관 동의 등, 토글이 있다.)

*Toggle에 관해서는 Radio, Toggle Group, Tab 등 다양한 베리에이션이 있기 때문에 추가적인 공부가 필요하다.

작업 순서

1. 컨셉 디자인
2. 전체적인 디자인

레이어 정리의 중요성

• 정보의 맥락과 레이아웃 구조 이해가 바탕
• 작업 효율이 올라간다.
• 완성도가 있는 UI의 완성의 시작이다.

---

제작 과정

레이아웃 스케치

대충 난 이런 느낌이 좋아서 이런 느낌으로 가보자

 

제작 시작

1. 셰잎툴을 사용하여 배경창 생성

 

2. 펜툴을 사용한 버텍스 편집을 이용하여 타이틀 부분도 완성해준다.

특히 텍스쳐를 표현할 때는 배경과 색의 대비를 잘 이루어야 하고 글자색이 어둡다면, 밝은 그림자색을 채택하여 이중 대비를 통해 더욱 잘 보이게 하면 좋을 것이다.

 

3. 기타 창들과 레이어 함수를 잘 활용하여 채워본다.

---

결론

UI를 제작하는 과정자체는 단순 포토샵 활용이기 때문에 모양을 내는 것은 어렵지 않다. (물론 예쁘게 하려면 시간을 많이 박아야 겠지만...)

하지만 상황에 맞게, 사용성 좋게 만드는 UI는 설계단계에서 엄청난 품이 들기 때문에 꾸준히 공부해야할 과제이다.