산전수전 공중전 다 겪어본 18년차 게임그래픽디자이너가 말하는 2D게임그래픽 실무팁(2021. 10. 25.)

1. 주니어 디자이너들에게
알려주고 싶은
디자인실무TIP
2021. 10. 25.
유유자적 라이프 김윤정

2. 산전수전 공중전(..) 다 겪은 18년차 게임그래픽디자이너.

3. Q. 디자인은 잘 그리면 된다?

4. A. 잘 그리는 것도 좋지만,
규격에 맞게 그리는게 첫번째!
그래픽
스타일
이미지
크기
파일
포맷
뭔 당연한 얘기를 이리 길게 하나 싶겠지만…

5. 알면 신입이 아니다.
[출처 : 구글 이미지 검색]

6. 예를 들면..
양감
무시하고
디테일 파기
리소스
크기가
1000x1000
리소스
*.psd로
보내기
그럴 수 있다. 누가 알려주지 않았으니.
대신 다 완성되기 전에 중간에 살짝 보여주세요.
도트인데
번졌어요
레이어
안 쓰고
통으로
그리기

7. 게임을 디자인할 때 TIP
• 디자이너라면 누구나 자기 그림 스타일은 있다. 게임
만들 때 가장 좋은 건 기획 방향과 어울리는 그림.
• 시안 작업에 너무 힘 빼지 말자.
• 어차피 초반엔 수시로 갈아 엎는다.(..)
• 게임은 팀 작업이므로 서로 대화가 중요. 잘 모를 땐,
직접 물어보자. 너무 멀리 가면 다시 돌아오기가 많이
힘들다.

8. 사수가
있다 vs 없다
사람에게서 배울 수 있는 건 다 배워 두자!
어차피 누구나 나중엔 홀로서기. 없으면 독학해야 함.

9. 구글신의 가호가 그대와 함께 하길..
• 대부분 동영상 강좌 몇 번 보면 툴은 어느 정도는 익힐 수 있다.
• 주로 자주 쓰는 기능 위주로 쓰고, 기본에서 크게 안 벗어난다.
• 외우지 말고 그 때 그 때 필요한 기능 찾아보면서 익히자.

10.  캐릭터
 몬스터
 땅
 울타리, 꽃, 풀
 버섯집, 나무
 가까운 산, 먼산
 하늘과 구름
 시작/골인지점
 UI 요소
일단 눈에 보이는 것들은
여기까지.
이 게임을 만든다면, 어떤 고민이 필요할까?

11. - 기준 해상도(HD? FHD? QHD? UHD?)
- 대상 플랫폼(PC? 안드로이드? 아이폰?)
- 캐릭터 등신비, 기본 체형, 캐릭터 동작 리스트.
- 프레임 by 프레임으로 그릴까? 아님, 스켈레톤 애니메이션으로?
- 성별/종족/직업 등으로 캐릭터 조합시스템이 필요한가?
- 직업과 레벨별로 각각 다른 의상과 장비가 필요한가?
- 통맵? 타일맵? 배경/오브젝트/몬스터 종류와 크기
- 사용할 그래픽 툴은 무엇?
- 파일은 서로 어떻게 주고 받을 건가?
- 디자이너가 여러 명일 때, 작업은 어떻게 나눌 건가? 등등
프로젝트마다 작업 방법이 모두 다를 수 밖에 없음.
경험의
영역

12. 기준 해상도
기준 해상도를 정하고,
그 안에서 상대적인 크기 시안 잡기
[출처 : 구글 이미지 검색]

13. 인게임 아이콘
하나가
1000x1000
이면 곤란
작은 것보단 크게 그리는게 좋지만
목적에 맞게 적당히 크게 그리자.
[출처 : 구글 이미지 검색]

14. 기준 종횡비
폰마다 화면 비율이 제
각각이라 보통 UI를
가변적으로 배치하여
대응한다.
기준에 따라 어떤
해상도에선 테두리에
검정색이 들어오거나,
그림이 짤려 보일 수 있고,
또 다른 해상도에선
찌그러져 보일 수 있다.
중요한 정보는 짤리지 않게
안쪽으로 배치 필요.
[출처 : 구글 이미지 검색]

15. 최종 해상도 1920 x 1080
작업 해상도 384 x 216
20%
축소
도트일 때, 작업 해상도 정하는 팁

16. 최종 화면 종횡비에 맞게 응용
[ 4:3 화면 비율 ]
• 1600x1200
• 320x240
• 1024x768
• 800x600
• 640x480
• …
[ 16:9 화면 비율 ]
• 1920x1080
• 384x216
• 2560x1440
• 1600x900
• 1280x720
• 640x360
• …
20%
축소
20%
축소
축소할
비율은
자유

17. 포토샵에서 도트를 임의로 늘리면 벌어지는 대참사
크기는 한번 정해지면 중간에 바꾸기 어려움
150%
안됨

18. 엔진에서 임의로 늘리면?
픽셀 크기가 제 각각

19. 마을맵 구조
[바닥]풀밭(타일)
[원경] 하늘, 뭉게구름, 먼산 [근경] 나무, 집, 울타리
구름은 보통 따로 떼서
느릿느릿 움직이게 만들어요.
원경
근경
바닥

20. 바닥(타일) 바닥을 자세히 보면
패턴이 반복 사용되고 있어요.

21. 공사는 바닥부터
타일
바닥을 자세히 보면
패턴이 반복 사용되고 있어요.
하나 만들어서 복붙, 복붙.. Ctrl+C, Ctrl+V
16x16
풀밭타일

22. 바닥타일 추가하기(16x16)
오른쪽
막기
왼쪽
막기
가운데
부분
타일 복사해서 양쪽 끝부분 연필과 지우개로 수정!

23. 바닥(타일) 반복시켰을 때 어색하지 않으려면,
서로 맞닿는 부분이 비슷해야 해요.
양 끝 픽셀은 그냥 두고, 가운데 부분만 변화를 주세요.

24. 타일맵을 할거면?
어떤 타일이
그려져야
할까?
(16x16)
모든 경우의 수를 고려하여 타일셋(tileset) 제작.

25. 다양하게
조합가능
타일셋(tileset) 자유자재로 조합해서 쓸 수 있게
같은 크기의 타일을 모아놓은 것

26. 배경 오브젝트 그리기
 집
 나무
 꽃과 수풀
 울타리
 그 외 뭐든지!

27. 스프라이트 시트(*.png)
1프레임 2프레임
3프레임 4프레임

28. 가장 큰 이미지가 기준인 이유
크기가 같으면
그냥 1:1 교체하면 됨
32 x 32 32 x 32
19 x 27 19 x 28
애니메이션 할 때 엔진에서
좌표를 직접 보정해야 함
바닥이 기준

29. 캐릭터 3면도

30. 쉬운 걷기
[출처 : 구글 이미지 검색]
앞으로
가!
제자리에
차렷!

31. 걸을 때 골반 높이가 달라지면서
동작에 따라 키가 조금씩 달라짐
걷기
[출처 : 구글 이미지 검색]

32. 걷기(2프레임)
SD캐릭터일 땐 이런 포즈!

33. 걷기(4프레임)
오른손 앞으로~
왼발 앞으로~
왼손 앞으로~
오른발 앞으로~

34. 걷기(4프레임)
• 왼팔을 앞으로 내민 길이와
오른팔을 뒤로 보낸 길이는 같아요.
즉, 팔다리 방향만 바꿔서
하나 더 만들면 되는 것!
* 몸에 가려 지는 팔/다리는 어둡게
표현하거나, 몸통 선을 그어줌
실루엣이 같아요

35. 오른쪽으로
걷는건? 좌우 반전
보통 프로그래밍에서
방향을 바꿔서 쓰니
따로 안 그려도 되요
이미지에서 좌우 반전시킨다면 [Edit]-[Transform]-[Flip Horizontal]

36. 걷기(4프레임)
오른손 앞으로~
왼발 앞으로~
왼손 앞으로~
오른발 앞으로~

37. 걷기(4프레임)
오른손 앞으로~
왼발 앞으로~
왼손 앞으로~
오른발 앞으로~
앞모습과 실루엣은 같아요.

38. 4방향 걷기
이렇게 캐릭터가
걸을 수 있게 되었습니다.

39. 조합 되는게
있다 vs 없다
게임작업
체크포인트

40. 성별/종족/직업 개념이 들어가나?
레벨 별로 각각 다른 의상과 장비가 필요한가?
: 캐릭터 알몸 따로, 옷과 장비 따로,
각각 *.png 저장하자!
안 그러면
두 번 작업
캐릭터 조합이 들어가는 경우

41. 캐릭터 조합
기본 체형
(알몸)
기본 체형+옷
옷
옷 따로,
몸 따로

42. 파츠별 *.png 분리 저장
조합될 위치(+여백 포함)에
*.png 로 개별 저장.

43. 조합이 있는 경우
알몸 따로, 옷과 장비 따로 그려서 엔진에서 조합

44. 처음부터 옷 입혀서 그려도 되요.
조합이 없는 경우

45. 실제 사람의 동작이 가장 좋은 레퍼런스
[출처 : 구글 이미지 검색]

46. 움직임을 관찰해보면 많은 도움이 됩니다.
[출처 : 구글 이미지 검색]

47. 페르시아 왕자(로토스코핑 기법)
[출처 : 구글 이미지 검색]

48. 페르시아 왕자의 비밀 포즈 모델은
개발자의
남동생(고딩)
[출처 : 구글 이미지 검색]

49. 스켈레톤 애니메이션 할 거면..
팔,다리,몸통
뜯어 놓기
동일한 크기에 디자인만 바꾸면 새 캐릭터 생성할 수 있어요.
[출처 : 구글 이미지 검색]

50. LV 1 슬라임 LV 3 골든슬라임 LV 5 블루슬라임
가장 쉬운 베리에이션 방법
색상
바꾸기엔
한계가 있다.

51. 직업별 일관성 있는 강화 단계 만들기
예) 레벨이 올라갈수록 점점 더 강해 보이도록 장식 추가하기

52. 주연과 조연의 적당한 밸런스 조정
한 화면에 알록달록한 많은 요소가 등장할 때는
게이머의 시선을 어디 쪽으로 유도할 것인가를 고려할 것.

53. 버튼, 팝업창, 말풍선의 재사용
오른쪽 그림처럼 늘려 쓰면 망합니다.(..)

54. 작은 조각 하나 늘려 쓰면 OK!

55. 9patch 작은 용량으로 크기에 맞게 늘려서 사용.
(버튼/팝업창/말풍선 등)
둥근 모서리 부분이
깎이지 않도록
연두색 보조선을
안쪽으로 이동

56. 가독성을 고려하여,
너무 요란하지 않게
배색을 정합니다.
버튼&팝업창
설명 1~2줄,
버튼 1~2개
* 버튼 크기 = 여러분의 손가락 두께를 꼭 생각하세요.
버튼(활성)
버튼(비활성)

57. 각자의 개성을 과시하기보단
전체적인 조화를 살피기
디자이너
여러 명일
경우
보통 기준을 하나 정해서 두 개를 나란히 놓고,
크기/색감 등을 비슷하게 맞춥니다.