[📜일지] 피그말리온 #4 : UI

[team_ca..(teamcandle)]

오늘은 UI 디자인에 대한 일지입니다~

이전 편 : https://gall.dcinside.com/mgallery/board/view/?id=game_dev&no=89757&search_head=10&page=1

UI 컨셉을 잡았기에 본격적으로 그래픽 제작에 착수했다.

청사진 컨셉이라 흰색과 파랑색이라는 제한된 색 구조에서 버튼을 알려주기에 고민을 했다.

그 결과 모든 버튼은 마름모로 제작을 하여 유저들에게 '마름모는 버튼이다!' 라는 자연스러운 인식을 할 수 있도록 했다.

실제로 주변 지인들에게 '어느 것을 눌러야 상호작용이 가능 하는가'에 대한 피드백을 받았으며,

다행스럽게도 모두들 어느 것이 버튼인지 인지하고 있었다.

문제는 프로그래밍 영역이었는데...

나름 픽셀 그래픽을 제작하는 건 자신이 있었지만, 실제로 프로그래밍에 적용하기엔 조금 힘들었다.

이미지를 45도 기울이고 터치를 하면 안되냐고 생각했는데,

망할 놈의 픽셀 그래픽컨셉이 무너져 버리는 현상이 발생해버리기에...

그래서 야매로 이미지는 따로 놔두고 투명한 사각형 버튼만 회전해 만들었다.

메인화면 구성은 미니 메트로에 한씬으로 구성된 요소에 영감을 받아서 제작을 했다.

하지만 픽셀 그래픽인 만큼 미니 메트로처럼 회전이나 확대, 축소 등 다이나믹하게 제작을 하는 건 힘들 것 같다는 판단,

결국엔 평면적인 움직임으로 대체했다.

나름 이렇게 만들어 놓으니까 인게임뿐만 아니라 메인화면에서도 재미와 몰입감을 한층 더 줄 수 있을 것 같다.

덤으로 구역별로 나뉘니 GUI배치 및 프로그래밍도 훨씬 수월했다.

다음 편에 계속...(캔들을 항상 열려있습니다.)

원본 블로그 링크 : https://blog.naver.com/team_candle/222675578736

[02020202(jyoug2)]

[연어(smosal)]