조회 수 3757 추천 수 1 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부




미리 그려보기


 


UI를 실제로 배치하기 전에 꼭 해봐야 할 작업이 있다.


일단 펜과 종이를 준비해서.


UI를 직접 손으로 그려본다.


미적으로 표현할 필요는 없다, 다만, 대강의 형태를 표현할 수 있으면 된다.


이 작업으로 UI를 만들었을때 어떤 오류가 일어나는지, 그리고 UI의 흐름을 한 줄기로 잡아줄 수 있다.


그리는데 펜과 종이가 아니더라도 상관 없다.


포토샵을 이용해서도 가능하고 그림판으로도 가능하다.


내가 생각하기엔, 컴퓨터로 할 거라면 이왕이면 사운드 까지 같이 첨부할 수 있는 플래시가 좋을 듯 하다.


 


 


텍스트 메뉴 배치


 


텍스트로 이루어진 메뉴 목록의 배치를 무심코 지나쳐선 안 된다.


'종료'메뉴가 일반적으로 가장 아래에 배치되는 이유를 생각하면 이는 알기 쉽다.


RPG2K를 켰을때 시작, 불러오기, 종료 순으로 배치가 되어있다.


하지만 종료 버튼이 가장 위에 있다면?


 


메뉴를 가장 처음 열어봤을때 보여야 할 메뉴는 가장 많이 쓰이는 메뉴들이어야 한다.


쓰이지 않는 메뉴일 수록 서브 메뉴로 밀어두는게 좋다.


 


 


부피를 늘리지 말자


 


UI에는 게임의 어떤 정보를 화면에 표시할 것인지 이유를 곰곰이 생각해보고 신중하게 걸러내야 한다.


쓸모 없는 정보의 표시로 게임화면을 차지하는 것은 방해요소가 될 뿐이다.


그러나..


 


 


작다고 좋은 것 만은 아니다


 


사각의 게임 화면에서 UI를 배치한다는건 일반적으로 플레이 화면이 UI에 의해 침범당함을 뜻한다.


그래서 우리가 해야 할 일은 이 '침범'의 느낌을 최소화하는 것이다.


첨부한 첫번째 스크린 샷의 레이아웃을 보자.


 



첫번째 스크린 샷은 게임 화면을 최대한으로 덜 차지하는 좋은 예이다.


하지만 이 레이아웃은 게임에 따라 플레이 화면을 침범하는 UI가 될 수도 있다.


왼쪽 아래에 랩터가 가려진 모습이 보이는가?


그렇다면 다른 형태는 어떨까.


첨부한 두번째 스크린 샷의 레이아웃을 보자.


 



이전 레이아웃은 사각의 플레이 화면에 다른 사각형이 침범하는 듯이 보였지만


이 레이아웃은 크기가 더 크면서도 그러한 느낌이 없다.


플레이 화면이 침범이 없는 완전한 사각의 형태로 보이고 레이아웃 또한 영역이 더욱 넓어져 내용을 더 풍부히 할 수 있다.


 


 


마치며


 


창조도시의 게임들은 게임으로 전달하려는 이야기, 게임의 규칙에 대해선 대단히 신경을 쓰지만


UI 부분에 있어서는 항상 아쉬운 부분이 많은 것 같다.


UI는 유저와 가장 최초로, 그리고 꽤 많은 비중의 상호 작용이 일어나는 게임의 얼굴로


유저 편의 측면에서 가장 많은 공이 들어가야 할 부분이다.


이 강의에선 미적인 측면에 대해 일절 언급하지 않았지만 미적인 면과 기능적인 면에서 절충안을 찾는 것 또한 중요하다.

?
  • ?
    손님아님 2011.01.29 10:54

    강의실에 처음와서 본 글이 이 글이란게 다행이라고 생각될 정도로 좋은 글이군요.

    본문의 단어를 빌려 표현하자면,  직관적으로 알기 쉬운 멋진 설명이었습니다.

    다음글도 기대하고 있겠습니다.


  1. 인디게임 기획자가 알면 좋은 것 몇가지

    Date2013.01.13 ByMiDtics2 Views1307 Votes2
    Read More
  2. 게임 제작 강의 / 1주차 2강 게임 기획의 과정과 방법

    Date2012.05.22 By히히지 Views1724 Votes0
    Read More
  3. 게임 제작 강의 / 1주차 1강 게임의 개발과정에 대한 이해

    Date2012.05.22 By히히지 Views2000 Votes2
    Read More
  4. 아마추어/독립게임 에 맞춘 게임개발.

    Date2012.05.07 By王코털 Views1398 Votes5
    Read More
  5. 크로스플랫폼(Cross-Platform) 게임 개발에 대하여.

    Date2012.04.28 By王코털 Views1161 Votes1
    Read More
  6. 멋진 효과는 멋 없다

    Date2012.04.09 By날씨참좋군요 Views1489 Votes3
    Read More
  7. 왜?

    Date2011.12.25 By날씨참좋군요 Views1839 Votes1
    Read More
  8. 짧은 충고 - 뒤집힌 집

    Date2011.10.23 By날씨참좋군요 Views2623 Votes2
    Read More
  9. 지식의 범람

    Date2011.10.10 By날씨참좋군요 Views2235 Votes0
    Read More
  10. 완성의 경험

    Date2011.08.02 By아싸사랑 Views2822 Votes4
    Read More
  11. 게임 만들기 쌩바닥부터 시작해보자 -2- 문서화편

    Date2011.06.30 ByVermond Views3028 Votes3
    Read More
  12. 짧은 충고 - 내 아이디어는 정말 멋져! 누구도 생각하지 못 했을걸!

    Date2011.06.10 By아싸사랑 Views2856 Votes1
    Read More
  13. 상호작용 문제 - 비주얼 노벨이 게임이냐, 아니냐?

    Date2011.05.27 By아싸사랑 Views2920 Votes1
    Read More
  14. 잘못된 저장하기(SAVE)와 불러오기(LOAD)

    Date2011.05.16 By아싸사랑 Views2955 Votes2
    Read More
  15. 소개 에러 - 펫 시스템, 크리티컬 시스템, 시스템시스템시스템..

    Date2011.04.21 By아싸사랑 Views2702 Votes1
    Read More
  16. 게임 만들기 쌩바닥부터 시작해보자 -1- 기초편

    Date2011.04.14 ByVermond Views7300 Votes12
    Read More
  17. 스케일 문제

    Date2011.02.28 By아싸사랑 Views2681 Votes2
    Read More
  18. 플레이와 내러티브의 균형 조율

    Date2010.11.01 By아싸사랑 Views2676 Votes3
    Read More
  19. 효과적인 UI의 설계 - 개론

    Date2010.11.01 By아싸사랑 Views3101 Votes0
    Read More
  20. 효과적인 UI의 설계 - 배치

    Date2010.11.01 By아싸사랑 Views3757 Votes1
    Read More
Board Pagination Prev 1 2 3 4 Next
/ 4






[개인정보취급방침] | [이용약관] | [제휴문의] | [후원창구] | [인디사이드연혁]

Copyright © 1999 - 2016 INdiSide.com/(주)씨엘쓰리디 All Rights Reserved.
인디사이드 운영자 : 천무(이지선) | kernys(김원배) | 사신지(김병국)