소셜게임, 11클로버 제작기(2)
메인화면의 뒷 이야기
11번가를 찾아온 11클로버를 소개합니다
행운을 가져온다는 의미의 네 잎클로버를 모티브로 제작된 11번가 게임콘텐츠 “11클로버"
비슷한 앱테크 게임은 많지만 11번가만의 색깔을 담아,
11번가를 방문하는 고객에게 행운을 드리자는 의미에서 출발했습니다.
럭키팟 / 기묘한화분1 / 11클로버럭 / 럭키클로버럭 / 럭키그로우 / 마이럭팟마 / 마이리틀클로버/ 럭키클로버 / 일레븐클로버 / 모두의클로버 / 럭키팟 / 11번클로버기 / 기묘한화분 / 럭키가든 /
럭키팜 / 럭키챌린지 / 해피클로버마 / 마이럭 / 11럭팟 / 마이리틀클로버 / 럭키의숲 / 럭키팡 /
11의클로버 / 하이럭키 / 마이클로버 / 네잎콜렉터 / 11팡 / 운수좋은팜 / 럭키블라썸 / 해피팟 /
그로우럭키(grow lucky) / 그럭(grow luck) / 11플랜트 / 럭키플랜트 / 11포레스트
처음에 이렇게 많은 네이밍의 후보들이 있었습니다. 보시면 재밌고 통통 튀는 네이밍들이 많았어요. 럭키팜, 11팜, 럭키챌린지도 나름 인기 있는 후보 중 하나였습니다.
우리가 보여주고 싶은 게임의 목적을 직관적으로 표현하는 게 좋을 거 같다는 의견에 힘입어
“11”번가 + 네 잎“클로버" = "11클로버"가 탄생하게 되었습니다.
귀여운 백설냥이가 절친이고,
쓰다듬어 주면 하트를 뿅뿅 뿜어내는 사랑스러운 11클로버랍니다.
11번가에 등장한 11클로버 게임은 어떻게 탄생했을까요?
클로버 탄생과 관련하여 비주얼 및 화면 제작과정을 소개합니다.
11클로버 탄생의 시작점 : 뭐부터 하지?
1. 캐릭터 1차 원화부터 3D 제작 과정
이렇게 사랑스러운 “11클로버"가 하루아침에 만들어진 건 아니었어요.
우선 3D 작업을 시작하기 전에 1차적으로 일러스트 원화를 제작했습니다.
과연 ‘11클로버’의 초반 스케치는 어떤 모습이었을까요?
클로버 1차 원화둥글둥글한 화분과 여리한 잎들의 초기 원화 너무 귀엽지 않나요?(주책)
1~4단계로 자라는 클로버와 초기안에는 예쁜 꽃도 있었답니다.
이 원화를 토대로 3D 제작이 진행되었어요.
메인은 클로버이지만 성장하며 변화하기에 감정을 표현하는 특성은 형태가 유지되는 화분에 부여했습니다.
3D 중간 제작 과정3D로 표현된 클로버 중간 제작 모습들이에요. 2D의 클로버랑 닮은 듯 다른 3D의 클로버 화분의 모습이죠?
둥글한 화분의 모습이 3D에서는 오히려 둔탁해 보이고, 4단계에서 클로버가 화분아래로 내려온 모습들이 무겁고 답답해 보여, 이 부분들을 보완해 나갔습니다.
(좌) 미드저니를 활용해 제작한 3D 화분들 (우) 미드저니를 참고해 보완한 최종형평면 이미지를 입체로 구현하였을 때 생각하는 형태가 각기 다르기 때문에 조금 더 정확하고 구체적인 가이드가 필요해 미드저니로 수십 개의 참고 이미지를 뽑아내고 그중 가장 기획에 가까운 이미지를 선택 참고하여 3D로 보완한 것이 현재의 모습입니다.
화분의 형태를 조금 더 슬림하게 수정하고 클로버 줄기와 잎 위치를 조절해 입체감을 만들어 주었고,
밝기나 반사광 톤을 약간 낮추어 조금 더 따뜻한 느낌으로 마무리되었습니다.
원화의 꽃은 최종 과정에서는 빠졌지만 귀여운 표정은 그대로인 11클로버가 탄생했습니다!
2. 미드저니 활용한 배경 제작 이야기
배경은 초기 시안 때 제작했던 이미지를 3D 느낌을 반영하여 변환했고,
이 단계에서도 미드저니를 통해 빠르게 방향을 잡을 수 있었습니다.
미드저니를 활용한 배경 초기 시안미드저니를 사용하여 다양하게 뽑아낸 게임 배경에 클로버 원화를 넣어 테스트한 시안들입니다.
미드저니는 여러 가지 생성 모델을 가지고 있는데 이번 작업에서는 주로 niji를 사용하였습니다.
(명령어는 —niji 또는/setting으로 niji model을 선택)
niji는 애니메이션이나 만화 스타일의 이미지를 생성하기 좋습니다.
하지만 만화적 특수성 때문인지 물체를 의인화하거나 인물 중심의 이미지를 많이 제작합니다.
그럴 때 niji 내에서만 사용할 수 있는 명령어 —style scenic을 추가하면 배경 위주의 이미지가 만들어집니다.
프롬프트를 디테일하게 사용하시는 분들도 계실 텐데 클로버 작업에서는 이미지를 넣어 주로 사용했습니다.
먼저 원하는 이미지의 핵심 단어로만 프롬프트를 생성하고 명령어 —C를 마지막에 입력합니다.
명령어 C 다음 숫자 10-100을 붙이면 되는데 숫자가 높을수록 4개의 이미지 스타일이 다르게 나타나고,
프롬프트 내용과 많이 멀어질 수 있기 때문에 20 또는 40 정도로만 사용했습니다.
이 과정에서 나온 다양한 이미지 중 원하는 것과 유사한 것들을 선택하여 이미지 주소를 가져와 프롬프트 맨 앞에 붙이면 됩니다.
이미지 링크를 추가하면 해당 이미지의 스타일을 미드저니가 인식하여 이것을 기본으로 생성합니다.
그리고 그때마다 생성되는 이미지 중 더 나은 것이 나올 경우 이것으로 링크를 교체하여 최종 이미지를 완성했습니다.
배경 작업 과정에서 미드저니로 제작 (수풀과 꽃은 미드저니 이미지 그대로 사용)그렇다면 과연 이 많은 후보군들 중에 어떤 배경이 선택되었을까요?
클로버 게임을 하시는 분들은 이미 아시겠죠?
최종 배경 이미지선택된 배경을 바탕으로 추가 작업을 거쳐 최종본이 완성되었답니다.
중앙 울타리가 정원과 언덕을 분리해 자연스레 거리감을 만드는 점이 좋아 최종 배경에도 적용했습니다.
집과 화분 뒤 수풀들은 모두 미드저니를 통해 얻은 소스들입니다.
이렇게 완성한 배경을 초기 원화와 비교해 보면 채색의 톤이 강해지고 좀 더 생동감 넘치는 이미지로 변화한 걸 알 수 있습니다.
화면 UI와 모션, 그리고 사운드(효과음) 디자인
1. 화면 구성 제작과정
화면 UI를 설계하는 데 있어, 한정적인 공간 안에서 각자의 메뉴들을 잘 보일 수 있게 구성하려면 어떻게 해야 할까 고민이 되었습니다.
그렇다고 저희가 게임회사는 아니다 보니 구현할 수 있는 방법에 한계가 있었어요.
2D 스타일의 원화에서는 플랫 한 버튼 디자인이 잘 어울렸지만 3D 그래픽에 적용해 보았을 때,
버튼은 잘 보이지만 매력적으로 느껴지지 않는 단점이 있었습니다.
클릭을 유도하여 게임을 진행시켜야 하는데 눌러보지 않고 게임 닫기 버튼을 누르면 안 되잖아요?
그와 동시에 버튼 위치에 대한 고민도 많았어요.
처음에는 메뉴를 하단과 우측으로 분산해서 설계를 했었는데, 우측에 놓인 메뉴들로 인해 화면이 복잡해 보여 메뉴 구성을 줄여 하단으로 배치하고 상단에는 오브젝트를 최소화하였습니다.
전날 구매 여부에 따라 터트릴 수 있는 물풍선이 화분 위로 떠다니기 때문에 메뉴를 아래로 두었더니 물풍선의 이동경로도 확장되었습니다.
초기 UI시안버튼에 입체감을 주어 아이콘이 플랫 하게 들어가더라고 심심해 보이지 않도록 구성하였고,
추가로 아이콘으로만 구성된 것과 메뉴명을 함께 보여주는 두 가지 타입으로 시안 테스트를 진행했습니다.
아이콘만 보여주는 게 심플하지만, 역시나 고객이 보았을 때 메뉴명의 인지가 쉽지 않다고 판단되어 메뉴명을 함께 노출하는 방향으로 최종 정리되었습니다.
최종 UI 화면2. 모션진행 과정과 사운드(효과음)에 관련하여
이번 11클로버 프로젝트를 진행하면서 게임 개발이 처음인지라 많은 난관들이 있었는데,
그중 가장 큰 비중을 차지한 건 바로 모션과 사운드(효과음)이었습니다.
게임에 필요한 모션 요소들이 이렇게 많을 줄 상상도 못 했거든요.
화분 움직임과 표정, 물 획득했을 때, 물을 줄 때, 물펌프에 물이 찼을 때 등 움직임뿐만 아니라
적절한 이펙트 효과까지!
디자이너분들이 머리를 맞대며 고민하고 몸짓으로 표현하며 모션/사운드 시나리오를 작성했던 기억이 떠오릅니다.
11클로버 표정 초기 시안11클로버에는 위 이미지처럼 표정/동작 모션 및 다양한 이펙트 효과들이 적용되어 있어요.
상황에 따라 미소 띤 표정과 단계별 성장 시 신나는 표정 등을 다양하게 구성하여 클로버가 느끼는 감정을 생동감 있게 전달하고 싶었습니다.
비슷한 이유로 클로버 닉네임을 고객이 직접 설정하게 한 것도 클로버를 반려식물처럼 애정을 가지고 키워가길 바란 마음에서였습니다.
11클로버 다양한 표정들그렇게 완성된 클로버의 다양한 표정들. 어떤 상황에서 짓는 표정인지 11클로버를 통해 찾아보시는 것도
게임을 재밌게 즐길 수 있는 방법이 될 거예요.
그 외에도 하루 처음 접속 했을 때 클로버 주변에 반짝반짝 이펙트 효과가 나타나고 있는 걸 볼 수 있습니다.
그때 11클로버를 문지르면(쓰다듬기) 하트가 뿅뿅 나온답니다.
이걸 부스터라고 하는데 부스터는 하루에 한 번만 적용되지만(부스터 발동 시 물을 주면 게이지가 10% 더 올라가요) 부스터는 없어도 쓰다듬기는 무한으로 가능하니, 자주자주 쓰다듬어 주세요.
아마 클로버가 행복해할 거예요.
그리고 한 단계씩 성장할 때 이펙트와 들썩이는 화분 동작 모션, 물을 받을 때 물방울이 물뿌리개 안으로 들어가는 모션, 물풍선을 터트릴 수 있을 때 물풍선 주변으로 반짝이는 이펙트 등
다양한 효과들을 넣어 게임 진행 시 좀 더 재미있는 경험으로 다가갔으면 하는 마음으로 작업했습니다.
이 외에도 소개하지 못한 다양한 모션과 이펙트들이 있는데요.
11클로버 게임에 접속하여 직접 찾아보는 재미를 경험해 보시길 추천합니다.
4단계까지 키워내면 클로버 하나를 모을 수 있어요.
클로버를 다 모았을 땐 어떤 이펙트와 모션이 나올지 궁금하지 않으세요?
내가 고른 선물도 받을 수 있는데 거기다가 순금 클로버(0.5돈) 당첨기회까지 있답니다.
11클로버 여정의 마지막으로 사운드에 대해 짧게 이야기해 볼까 합니다.
클로버 게임에 사운드(효과음)가 딱 3군데 적용되어 있습니다. 과연 알고 계신 분들 있으실까요?
물 주기 동작할 때
쓰다듬기(부스터) 적용될 때
클로버 1개 / 11개 모았을 때
효과음을 적용하면서 가장 고려했던 점은 음악을 들으면서 쇼핑과 게임을 즐기는 고객분들에게 최대한 방해되지 않을 정도의 효과음과 볼륨이어야 한다는 점이었습니다.
처음엔 더 많이 적용되었던 사운드를 걷어내며 지금의 11클로버가 완성되었습니다.
마무리하며
지금까지 11클로버의 탄생과 제작과정의 뒷 이야기들을 풀어보았습니다.
11클로버는 3월까지 진행될 예정이라 아직 11클로버와 백설냥이를 만나지 못하셨다면 얼른 서둘러 11번가를 방문해 보세요.
시작했다 포기하신 분들도(포기하지 말아요~) 겨울로 바뀐 클로버 겸사겸사 구경하러 오세요!
팁으로 클로버 빨리 모으는 방법은 물론 물풍선 터트리기도 있지만,
물 받기 미션과 친구초대, 그리고 시간대별로 제공하는 보너스(오전 9시, 오후 3시, 오후 7시)를
통해서도 물을 받을 수 있으니, 포기하지 말고 열심히 키워주세요!
