[🏆HIT] 주모 키우기 - UI는 어케 만듬???

[로망바드(kong1659)]

얘들아 안녕? 요즘은 꽤 자주 보이지? 

아무래도 눈에 보이는 그래픽 작업을 하다보니 코딩하고 있을 때보단 글을 자주 올리게 되네. 

뭐 그것도 이번이 마지막이지 싶어. 이유는 이따 설명할게. 

자 오늘은 UI 디자인을 잡아볼 예정이야. 

간단한 프로세스와 함께 공유할테니 UI쪽이 익숙하지 않은 친구들에게 조금이라도 도움이 되었으면 좋겠네.

그와 별개로, 작업에 대해 아쉬운 점이나 개선사항이 보이면 언제든지 편하게 댓글 남겨줘.

혼자서 맨땅에 헤딩하고 있다보니 솔직한 피드백 받을 데가 없거든 ㅎ; 

사실상 이게 작업일지를 올리는 가장 큰 이유기도 해.

그럼 시작해보자.

   

먼저 컨셉을 잡을 UI 대표 페이지를 2장 정했어. 

물론 게임에 사용되는 페이지는 훨씬 많지만, UI 특징상 겹치는 페이지가 많다보니 스타일을 정하는데는 이 두 페이지(메인 하나, 팝업 하나)로도 충분할 거라고 봤어.

이 두 페이지가 마무리되면 나머지는 그냥 약간의 응용과 노가다의 연속이라고 볼 수 있지.

먼저 컬러링 된 배경 이미지를 사이즈에 맞춰 올리고

디자인해둔 캐릭터를 SD에 맞춰 제작한 다음에

배경에 올려줬어. 

그 다음엔 UI에 사용될 컨셉을 고민해봤지.

게임이 조선시대 배경이긴 한데, 글로벌까지 생각하면 굳이 지역색을 전면에 내세우고 싶진 않더라고.

뭐 특색이야 있어 보이겠지만, 그만큼 처음 보는 사람들은 어색할 거잖아?

때문에 민속화나 수묵화 스타일 같은건 배제하고 그냥 평범한 스타일로 결정했지.

컨셉이 결정된 이후엔 컬러 팔레트를 정했어.

생소한 단어일 수 있는데, 그냥 UI에 쓸 색상들의 범위를 정한다고 생각하면 돼. 

좀 번거로울 수는 있는데, 이걸 미리 정해두면 나중에 페이지들을 쳐낼 때 좀 편해지거든.

난 컬러 팔레트를 이렇게 정해줬어.

딱히 큰 이유가 있었던 건 아니고, 기존 배경의 스타일과 잘 어울릴만한 것들을 찾다보니 이렇게 됐달까?

사실 고민하는 과정에서 옛날 한국에서 자주 사용되던 오방색을 어느정도 염두에 두긴 했어.

물론 그대로 쓰기엔 너무 쌩색이니까, 검, 흰, 빨, 파, 노라는 큰 범주 내에서 적당히 변형했지.

이렇게 정한 색상은 작업할때 참고하기 편하게 단계를 나눠줬지. 

자 이걸로 색상 지정은 마무리야. 

이런 컬러 팔레트에 관심이 있는 친구들은 구글에 찾아보면 색상 지정에 도움이 되는 사이트를 많이 찾을 수 있을거야.

일단 내가 참고했던 사이트 하나 던져놓고 감. ㅇㅇ

https://ppss.kr/archives/215219

다음은 폰트를 정할 차례야. 

모바일 게임, 특히 이런 방치형 게임은 텍스트의 의존도가 높은만큼 폰트에 따른 느낌 차이가 꽤 있을거야.

게임 자체의 분위기가 가볍고, 친근한 느낌을 의도하고 있어서 그런 느낌의 상업 무료 폰트들을 찾아봤지. 

물론 모바일 게임이니까 작은 화면에서 봤을 때 가독성도 높아야지. 

찾는 과정은 지루하니까 생략하고, 결론은 넥슨에서 공개한 메이플스토리 서체로 결정했어. 

좋은 폰트를 공개해 준 대인배 넥슨에게 감사를. 근데 이 폰트 메이플에선 안 쓰지 않아?; 못본거 같은데...

혹시 넥슨 폰트에 대해 관심이 있는 친구들은 링크를 참조해 줘. 딴 것도 많거든.

링크 - http://levelup.nexon.com/font/index.aspx

색상 정했고, 폰트까지 정해졌으면 사실상 나머지는 뭐 작업 문제지.

그 동안 더미로 사용해왔던 아이콘 이미지들의 퀄리티를 조금 올려주고, 

정해둔 컬러 팔레트를 응용해서 게임 내에 적용해주면 최종 완성이야. 

팝업 디자인도 이렇게. 

폰트랑 색상만으로 끝이야? 싶은 친구들도 있을 것 같은데, 그건 기존 디자인에서 대략적인 레이아웃을 확정 해놨기 때문에 그래. 

구현과 테스트를 하면서 버튼의 크기나 위치, 메뉴의 구성 같은 걸 확정해 둔 상태기 때문에 정말 디자인만 하면 됐던거지. 

물론 실제로 적용해보면 또 수정할 곳이 보이겠지만, 뭐 그건 그때 생각하도록 하고.

------------------------------------------------------------------------------

간단하게 공유하려고 했는데도 글이 꽤 길어졌네. 

각자 작업하는데 조금이라도 도움이 되었음 좋겠다.

피드백까지 주면 더 좋고.

이번 달 들어 그래픽 방향으로 이래저래 글을 꽤 올렸었는데, 이제 한동안은 뜸해질 것 같아.

내일부턴 결정된 디자인을 바탕으로 페이지 노가다를 시작해야 하거든 ㅋㅋ

그리고 이건 더 큰 작업인데,

얘네들을

이 모션에 맞춰 일일히 그려줘야 해. ㅋㅋㅋ

아 벌써부터 손목이 뻐근해진다...

이번 달 안에 다시 올 수 있을지 모르겠네;

좀 정리된다 싶으면 다시 공유하러 올게. 

그럼 다들 작업 열심히 해!

[익명(182.221)]

커여어

[최치우(chiu0001)]

[익명(220.119)]

그래픽 들어가니까 확실히 훠얼씬 보기좋네. 대박나라!!

[로망바드(kong1659)]

고마워! 열심히 해볼게. 근데 정리해놓고 보니 예상보다 작업량이 훨씬 많아서 현타가 올 거 같어 ㅋㅋ;

[익명(220.90)]

확실히 인디게임은 디자인이 깡패다

[익명(220.90)]

폰트소개 진짜 고마워 ㅋㅋ 꿀정보다

[로망바드(kong1659)]

도움이 됐다니 다행이네 :D

[unknown21(chihou00000)]

컬러 파레뜨 정해놓으니 눈이 편---안하다

[글삭튀전문가(plzreleasepark)]

난 왜 흑백이 더 좋아보이지

[글삭튀전문가(plzreleasepark)]

컬러가 별로란 말은 아니고 취향

[로망바드(kong1659)]

괜찮아. 그래픽이나 게임성이나 다 취향을 타는거니까. 돌리기엔 좀 먼길을 와버리긴 했는데 ㅋㅋ 담엔 흑백 스타일로도 한번 고려해봐야겠다.

[로망바드(kong1659)]

...근데 레이어 정리하면서 보니까 색상 우선순위 정리가 안되서 눈이 피곤한거 같기도 하네. 좀 더 생각해서 정리해볼게. 의견 고마워.

[글삭튀전문가(plzreleasepark)]

[익명(221.151)]

개인적으로 물어볼거 있어서 네이버 쪽지 보냈음 확인부탁!

[로망바드(kong1659)]

오, 확인해봄 ㅇㅇ

[익명(116.43)]

싫으면 듣고 버리는데 뒤에 질감 구겨진 종이처럼 해서 종이인형 느낌 나게 해보는건 어떰?

[익명(58.232)]

갠적으로 훨남