본문 바로가기
연구하기/게임 개발

Eternal Dream 의 카드 레이아웃 변천사

by 썰렁황제 2005. 6. 5.

이래저래 꽤 오랜 기간 공백 후 포스팅이군요.
명함판의 프로토타입도 찾은 겸 해서 카드 레이아웃에 대한 포스팅을 해 볼까 합니다..

명함 뒷면을 사용한 테스트판에서는 사실 사진에 올린 것 이외에도 여러가지 타입이 있었습니다. 유명한 TCG 인 매직 더 개더링 (그림 1) 처럼 우측 방향으로 전체적으로 수치 표기가 쏠린 형태의 것도 있었고, 그 방향이 정 반대인 것도 있었고, 상당히 여러 종류였습니다. 그러다가 마지막으로 사용한 것은 4각형의 각 모서리에 숫자가 배치되고 가운데 설명이 들어가는 형태였습니다 (그림 2). 얼핏 보면 아쿠아리안 에이지 (그림 3-1, 3-2)의 레이아웃을 사용한 것으로 보이지만, 사실 그 레이아웃을 따른 이유는, PizWorld 의 기반이 된 Flip Crystal 의 카드 레이아웃이 그런 형태였기 때문입니다. Flip Crystal 은 이전까지의 TCG 와는 달리 정방형 형태의 카드에 카드를 90도씩 돌려서 용도를 바꾸는 타입이었기 때문에 숫자가 각 귀퉁이에 위치할 수 밖에 없었죠. (Flip Crystal 관련 포스팅 http://gcempire.tistory.com/121 를 참조해 주세요..) 사실 명함에 만들 때만 해도 그 방식을 거의 그대로 사용하려고 생각하고 있었습니다.

그림 1 - '매직 더 개더링' 의 카드 구성. 이 구성은 5판의 것으로, 4판과는 테두리 간격 정도만 다르고, 알파~Revised 까지와는 글자 크기와 테두리 간격 모두가 차이가 납니다. 이후 7판까지 계속 사용됩니다. 이후 8판인가 9판에서 완전히 다른 디자인으로 바뀌었습니다
그림 2 - 지난번 포스팅에서도 나왔던, 명함 뒷면으로 만든 프로토타입입니다
그림 3-1 - 아쿠아리안 에이지의 캐릭터 카드. 아쿠아리안 에이지의 캐릭터 카드는 일반적인 TCG 의 크리처카드와 비슷한 역할을 합니다. 카드 레이아웃을 보시면 아시겠지만 Eternal Dream 의 클로즈 베타 1-3차와 거의 동일한 것을 알 수 있죠. 다른 점이라면 우측 상단 수치 정도.
그림 3-2 - 아쿠아리안 에이지의 브레이크 카드. 아쿠아리안 에이지는 브레이크 카드라는 독특한 개념이 들어가 있는데, 이 카드를 캐릭터 카드에 이용하면, 브레이크 카드에 해당하는 캐릭터로 아예 변경이 됩니다. 그렇게 되면 더 파워업 된 캐릭터로 바뀌거나, 네임드 캐릭터로 변경됩니다.


그런 정방형 컨셉을 포기하게 된 것은, 정방형의 개념을 PizWorld 가 활용하지 않으므로 굳이 그 형식을 쓸 필요가 있겠냐는 말씀이었습니다. 저도 그 요소를 그대로 끌고 갈 생각은 하지 않았기 떄문에 사실 쉽게 포기한 것이기도 했고요. 그래서 카드의 형태는 통상적인 TCG 와 마찬가지의 비율을 가지게 되었습니다만, 반대로 그 때문에 카드의 레이아웃을 다시 잡아야 할 필요성이 생기게 되었습니다. 4군데에 숫자를 배치할 당위성이 없어졌기 때문이죠.

그 때문에 여러가지 아이디어가 제시되었고 그 중 결정된 것은 제가 새로 제시한 모델이었습니다. 그것이  PizWorld 에 사용하게 된 그림 4 의 레이아웃입니다.

그림 4 - PizWorld 의 카드 레이아웃. 능력 설명은 중간부터 들어가게 되어 있었습니다만, 프로토타입 자체가 능력구현이 되어있지 않아 거기까지 실제 이미지가 진행되지는 않았습니다.

이 레이아웃에서 가장 주목할 만한 점은 우측 상단에 모두 몰리게 된 수치관련 인터페이스라고 볼 수 있습니다. 저 모양은 초기 FlipCrystal 의 수치 배치에 대해서 정방형이라는 개념만 그대로 가져와 (즉 정방형을 통한 방향의 전환을 제외한) 4방향 대칭의 마름모로 만들어 낸 것입니다.

이 레이아웃에서는 상하로는 자원의 소모와 생산, 좌우로는 공격력과 방어력을 배치하는 형식이었습니다. 상하와 좌우라는, 쉽게 인지할 수 있는 방향의 분리를 통해서 실제로 두 가지 개념으로 갈라지는 수치를 명확하게 구분하려고 했으며, 더불어 최상단에 자원 소모량을 배치함으로써, 카드가 가려진 상태 (당시에도 GUI 는 카드에 커서를 대지 않으면 카드의 상단만 나타나는 형식이었습니다.) 에서도 소모 자원은 쉽게 파악할 수 있도록 하게 했습니다. 하지만 보시다시피 최종 디자인은 제목이 최상단 수치보다 아래에 있었기 때문에 이 개념은 생각만큼 의미를 가지지는 못했습니다.

PizWorld 가 완성되고 난 후, Eternal Dream 을 제작하기로 결정하면서, 카드가 작은 상태에서는 이런 마름모 형식으로는 너무 작은 글씨만 표현가능하다는 문제가 발생하여, 팀에서는 다른 카드 레이아웃을 다시 고안해 보기로 헀습니다. 저는 마름모의 형태를 계속 고집하여 이를 바탕으로 한 다른 레이아웃을 고안해 보았습니다만, 팀에서는 어떤 방식으로든 이 형식은 일러스트의 공간이 너무 좁아진다고 판단, 최종적으로는 아쿠아리안 에이지의 카드 레이아웃을 따르기로 결정하였습니다. 그리고 그 결정을 바탕으로 하여 최종적으로 클로즈 베타 버전의 카드 레이아웃이 완성됩니다. (그림 5)

그림 5 - 클로즈 베타 1-3차까지의 카드 레이아웃. 클로즈 베타 1-3차까지 해 보신 분은 그리우실지도 모르는 이미지입니다. ^.^;

클로즈 베타의 카드 레이아웃은 익히 아시는 대로 클로즈 베타 3차까지 진행되는 동안 계속 사용되었습니다. 하지만 이 컨셉 역시 점차로 한계를 드러내기 시작했습니다. 가장 결정적인 문제는 능력이 카드 위에 그려지기 떄문에, 아무리 능력치 설명의 바탕이 반투명 처리가 되어 있다고 하더라도, 일러스트의 적지 않은 부분이 가려져 원래의 일러스트가 표현하려는 부분을 많이 깎아먹는다는 점이었습니다. 사실 레이아웃 결정 시 범한 결정적인 판단 미스는, 아쿠아리안 에이지의 세로 레이아웃은 설명이 적고 대부분 아이콘으로 능력 표시가 되는 캐릭터 카드에 한정해서만 명확하게 사용된다는 점을 간과했다는 것이었습니다. 브레이크 카드 이미지를 보셔도 바로 나타나지만, 캐릭터 카드를 제외하면 아쿠아리안 에이지의 이미지 칸은 거의 정방형에 가까웠던 것입니다.

그리하여 개발팀은 새로이 다른 레이아웃을 만들기로 결정하였습니다. 하지만 여러가지 한계가 새 레이아웃을 결정하는 데에 걸림돌이 되었습니다.

우선 문제가 된 것은 컴퓨터의 경우 이미지의 해상도 때문에 글씨 크기를 줄이는 데에 한계가 있다는 점이었습니다. 이는 그림 1, 그림 3-1, 3-2 에 제시된 실물 TCG 의 카드와 그림 5, 8에 나타난 Eternal Dream 의 카드를 비교해 보면 바로 나타납니다. 따라서 이 능력을 모두 기록하는 공간을 별도로 만들기 위해서는 일러스트가 차지하는 공간이 작아져야 하는데, 카드 일러스트의 형태가 카드의 가로 세로 비율을 그대로 맞추고 있기 떄문에 이런 공간을 가로 칸으로 확보할 경우 자연히 카드의 오른쪽이나 왼쪽에는 일러스트의 공백이 남을 수 밖에 없었습니다. 특히 계산 결과는 무척이나 참혹했습니다. 카드가 작은 상황에서는 일러스트가 거의 무슨 그림인지 알아볼 수 없을 정도였던 것이죠.
  그러나 사실 정말로 발목을 잡았던 것은 이전까지 수행된 100여장의 카드 일러스트가 모두 세로가 긴 형티로 그려졌다는 점이었습니다. 사실 위에 언급했던 문제는 카드 이미지 자체가 가로로 길게 들어간다면 전혀 문제가 될 것이 없었죠. 하지만 100여장의 일러스트가 이미 길게 그려진 이상, 만약 그렇게 결정될 경우 100여장을 모두 수정해야 하는 문제가 발생합니다. 이것이 간단한 문제가 아닌 것이, 그냥 가로로 긴 레이아웃에 맞추어 뎅겅 잘라버리면 위 아래로 길게 구성된 일러스트의 경우에는 정말로 토막난 사진이 되어버리기 떄문에 적절히 한정된 공간 안에서 일러스트를 자르고, 빈 공간을 새로 그려야 하는, 굉장한 시간이 요구되는 작업이 필요하게 됩니다. 따라서 그 전까지는 애당초 이미지를 가로로 길게 배치한다는 것을 꿈도 꾸지 못했었죠.

하지만 여기서 팀장님이 단호하게 결단을 내렸습니다. 지금 그려진 100여장보다 앞으로 그려질 카드가 훨씬 많으므로, 이 100여장 때문에 카드 레이아웃의 한계를 그대로 가지고 갈 수는 없다고 하신 것이죠. 그리하여 그 부분을 아예 몽땅 수정하는 것으로 생각을 하고, 제한 없이 카드 레이아웃을 구상해 보기로 헀습니다. 물론 카드 외주 작업이 모두 올스톱되었구요.

이 때 제가 접하게 된 새로운 카드가 '요정전승' 이라는 일본의 TCG 였습니다. (그림 6-1, 6-2) 아쿠아리안 에이지와 마찬가지로 미소녀가 적지 않게 들어간 이 카드 게임을 구매하게 된 것은, 실물의 형태가 어떻게 생겼는지 무척 궁금했기 때문이었습니다. 사실 당시 돈도 없어서 부스터 1개밖에 구매할 수 없었기도 했구요. ^^;; 아무튼 이 카드의 디자인이 마지막으로 결정된 Eternal Dream 의 레이아웃을 결정하는 데에 어느 정도 영향을 끼치게 됩니다. 제가 제시한 3가지 카드 레이아웃 중 그림 7-3의 레이아웃이 바로 그 영향을 받아 탄생한 것이죠.

그림 6-1 - 요정전승의 카드 중 하나. 요정전승은 룰을 전혀 모릅니다. ^;^;;
그림 6-2 - 역시 요정전승의 카드 중 하나.
그림 7-1 - 매직 더 개더링을 기반으로 만든 카드 레이아웃 컨셉. 조금 다르다면, 생산 개념이 대지(Land) 로 이루어져있는 매직 더 개더링은 생산 수치가 없으므로 상단 수치에는 하나의 수치만 나타납니다. 대신 다중 속성에 의한 자원 사용을 지원하므로 자원 소모치가 숫자가 아니라 각 속성의 아이콘을 배치하는 형태가 됩니다. (단 무속성-어느 속성으로도 대신할 수 있는-은 숫자로 표현)
그림 7-2 - 두 번째 컨셉. 이것은 PizWorld 시절의 마름모를 개량한 방법입니다. 숫자가 색이 다른 2개씩으로 묶인 것은 자원생산/소모와 공격/방어를 분리하기 위한 것입니다.
그림 7-3 - 오픈 베타에 최종적으로 사용된 컨셉. 실제 오픈 베타에 나온 것과는 조금 레이아웃이 다른 것을 알 수 있습니다. 능력 아이콘이 좌측이 아닌 우측에 배치되어 있지요. 우측의 빈 칸은 원래 에디션 아이콘과 그룹명을 넣게 되어 있었습니다만, 에디션 아이콘이 당초 예상과 달리 너무 크게 배치되어 그룹명이 들어갈 공간이 없게 되었습니다. 사실 그룹이 구현되는 것은 대단히 먼 계획에 포함되어 있었지만요. (5 편 창조 에디션)


새로운 레이아웃이 기존 레이아웃과 비교해서 크게 달라진 점은, 일러스트를 텍스트가 더 이상 점유하지 않는다는 것 이외에도, 카드에 대한 플레버 텍스트 및 에디션 마크가 추가되었다는 것입니다. 플레버 텍스트가 추가되어 플레이어들도 비로소 카드를 통해 시나리오의 일부를 알 수 있게 되었고, 에디션 마크를 통하여, 에디션의 확인 및, 게임 플레이 상 매우 중요한 요소인 고유 카드를 판별할 수 있는 방법이 생기게 되었습니다. 사실 고유 카드 판별 요소는 진작 추가되었어야 했는데, 공간 문제로 이래저래 보류되다가 카드 레이아웃이 바뀌면서 공간이 확보되어  비로소 적용할 수 있게 되었습니다.

드디어 레이아웃이 결정되고, 대량의 작업이 진행되었습니다. 이전의 모든 일러스트를 모두 가로길이 비율로 맞추고, 새 일러스트 발주는 모두 이 레이아웃에 맞추어 이루어지게 되었죠. 저도 이 일러스트 수정작업에 동참, 커팅작업은 거의 대부분, 수정 작업은 1장에 동참했습니다. 수정 작업의 대부분은 그래픽 담당하시던 분께서 해 주셨습니다. 클로즈 베타 시작한 후 새로 들어오신 그래픽 담당자분은, CG 쪽보다는 드로잉을 하셨던 분이어서, 일러스트 수정작업을 성공적으로 진행해 주셨습니다. 기존 일러스트 중 가슴에 브래지어(?) 입히는 작업도 이 분께서 수행을 해 주셨죠..^.^;; (물론 이 작업은 원작자분께 미리 사전에 허락을 받았습니다) 더불어 제가 제시한 컨셉을 실제 카드 테두리로 작업해 주신 것도 이 분입니다.

그림 8 - 카드 레이아웃 최종안. 익히 아시는 클로즈 4차부터 마지막 서비스까지의 레이아웃입니다. 컨셉안과 비교해 보면, 능력 아이콘이 좌측으로 이동했으며, 공격/방어 수치가 이미지 바깥으로 배치되었습니다. 자원생산/소모 수치란이 반투명 처리된 것은 그래픽 담당자분의 아이디어입니다.

이 카드 레이아웃이 사실상 최종 안이 되었고, 실제로 오픈 베타와 정식 서비스, 대만 서비스를 거치는 개발 기간 중에도 더 이상 레이아웃에 대한 변경 안은 계획되지 않았습니다. 다만 이 아이디어도 각 능력이 2줄 이상의 글을 포함하지 못한다는 한계를 가지고 있었기 떄문에, 이 문제를 해결하기 위한 방안으로 여러가지 마이너 레이아웃 기획안을 구성하려는 아이디어가 있었지만, 다른 일정 떄문에 실행되지는 못했습니다.

반응형