콘돔회사 디자이너의 [게더타운 디자인] 가이드라인 2
섹슈얼웰니스 브랜드, 세이브(SAIB) 디자이너가 알려주는 디자인 TIP
안녕하세요! 여성이 여성을 위해 만든 건강하고 안전한 섹슈얼웰니스 브랜드, 세이브(SAIB)의 디자이너 제인과&세미입니다!
지난 글에서는 게더타운 에셋 커스터마이징 방법에 대해 알아보았는데요, 이번 글에서는 그 결과물에 대해 소개해드리려고 해요! 동시에, 저희가 당당페라는 메타버스 페스티벌의 전체적인 공간과 에셋을 어떻게 디자인 했는지, 어떤 관점에서 접근했는지도 함께 알려드리겠습니다~!
아참! 혹시 당당페 by SAIB의 사례로 영감을 받으셔서 더 좋은 맵 혹은 오브젝트를 만드셨다면 댓글로 공유해주시면 감사하겠습니다! ˚✧₊⁎( ˘ω˘ )⁎⁺˳✧༚ 저희도 알고 싶어요~~!!!
1. 메타버스 성(性)페스티벌?
코로나로 인한 언택트 시대가 된지 벌써 1년이 넘었고, 많은 기업들이 비대면 행사를 진행하기 위해 다양한 시도를 하고 있죠. 저희 세이브(SAIB)도 다양한 비대면 채널 중, 요즘 가~~장 핫하다는 게더타운을 일찍이 이용해 온라인 페스티벌을 진행했었답니다. 자 이제! 저희가 디자인했던 국내 최초 메타버스 성(性) 페스티벌, "당당페"를 어떻게 디자인했는지에 대한 노하우를 알려드리면서 (그리고 조금의 자랑도ㅎㅎ) 게더타운 디자인 썰!!! 시작해볼게요!!!
그 전에! 당당페를 처음 들어보신 분들을 위해 당당페에 대한 소개 먼저 퀵하게 드릴게요. ٩(๑❛ʚ❛๑)۶
당당페는 당연한걸 당연하게 페스티벌의 줄임말이에요. 사회에 만연한 여성의 성에 대한 편견(BIAS)을 뒤집기 위해 시작한 건강하고 안전한 섹슈얼웰니스 브랜드 세이브(SAIB)가 주최한 메타버스 성 페스티벌입니다.
지난 7월 25일 일요일에 진행하였고, 총 116명이 참가했답니다!
주최한 세이브(SAIB)의 미션에 따라, 건강한 성문화를 앞장서서 만들어나가기위해 개최되었어요.
당당페 소개는 여기에서 마무리하고, 더 궁금하신 분들은 여기(노션페이지 링크 삽입) 를 클릭해주세요!!!
ξ(✿ ❛‿❛)ξ
2. 잠깐, 페스티벌을 만드려면..뭐가 필요하지?
온라인 페스티벌을 디자인할 때 가장 필요한 요소가 무엇일지 고민하다가.. 순서가 뒤바뀌었다는 생각이 들더라구요? 그래서 반대로 오프라인 페스티벌을 만들 때 어떤 요소가 필요한지, 우리가 한번씩 가봤던 오프라인 축제들은 어떤 모습이었는지를 생각해봤더니 오히려 구상하기가 훨씬 쉬웠어요.
당시 어렴풋이 떠올랐던 풍경은 프로그램별 부스를 중심으로 한 현수막, 배너, 풍선, 가랜드 등등이 있었습니다. 저희는 이 부분을 기획팀과 함께 소통하면서 페스티벌이 전반적으로 어떤 컨셉이어야 하며, 사용자들이 공간에 진입했을 때 어떤 느낌이 들어야하는지 등, 지속적으로 논의하면서 함께 구상해나갔습니다.
그 결과, 당당페 컨셉은 아래 이미지에서 보이는 것처럼 시원한 해변가에서 즐기는 온라인 성(性) 페스티벌이 되었답니다. 개최일자(7월 25일)가 여름휴가 기간임을 고려했고, 외부 액티비티 활동에 제한이 있으니 메타버스에서 시원하게 보내는 여름 - 이라는 큰 컨셉을 잡았던 것이죠.
당당페 맵 전체 이렇게 컨셉이 정해진 직후 바로 필요한 요소들을 정리했습니다 (아래 각 콘텐츠는 기획팀에서 전달받은 요소중 일부입니다).
위 리스트들을 한 덩어리로 묶어보자면, 아래와 같이 다섯가지 카테고리로 정리할 수 있었어요.
1. 세이브 쇼룸
• 세이브 제품을 전시하고 각 제품과 인터랙션 시, 세이브 온라인 자사몰과 연결하여 구매까지 이뤄질 수 있도록 하는 공간.
2. 세이브 도서관
• 세이브 대표 콘텐츠인 SAIB-SAID 아티클을 읽어볼 수 있는 공간으로, 도서관 형태로 제작.
3. 사진관 (포토존)
• 사진관 형태로 된 포토존 건물. 인스타그램 피드에 올릴 수 있도록 디자인.
4. 프로그램별 건물
• 당당페 내 주요 프로그램 (OX 퀴즈관, 당당토크쇼 무대, 캔디 스토어, 성감대 워크샵 건물)에 참여할 수 있는 개별 건물.
5. 해변 느낌과 페스티벌 느낌을 내는 요소들
• 풍선, 가랜드, 배너, 현수막, 파라솔, 서핑보드, 튜브, 아이스크림 차, 야자수 등등
무엇을 디자인해야하는지 명확히 정해졌으니, 이제 정말 '디자인'작업을 해야겠죠? 기본적인 맵 구축 및 오브젝트 제작방법이 궁금하시다면 여기를 클릭해주세요!
3. 에셋 디자인하기
게더타운에서 에셋을 디자인하는 데에는 2가지 방법이 있습니다.
1. 게더타운이 제공하는 기본 에셋 활용
• 생각보다 게더타운에서 기본으로 제공하는 에셋이 많아요. 그리고 이것만 활용해도 꽤 예쁘고 그럴싸한 공간을 만들 수 있습니다. 공간, 즉 맵(map)자체를 만드는 것은 어렵지않기 때문에 기획팀에서 진행해주었습니다!
2. 디자이너가 별도 툴로 직접 디자인
• 기본 에셋만 활용해서 페스티벌을 진행할 수 있다면 너무 좋겠죠.. 하지만 게더타운에서 브랜드 제품과 관련된 에셋을 제작해주지는 않습니다....( ¨̮ )..때문에 브랜드 아이덴티티를 강조하고싶다면 직접 디자인할 수 밖에 없어요. 저희도 이 경우에 해당되었습니다! 아래 이미지는 저희가 기획팀으로부터 요청받은 모든 에셋을 별도 디자인한 결과물입니다!
기획팀이 전달한 페스티벌 요소들의 디자인 구현 결과기획팀이 준 텍스트에서 이렇게 세이브(SAIB)의 실제 제품과 흡사한 모양으로 재탄생되었답니다! ✌(-‿-)✌ "오ㅏ.....저의 하찮은 텍스트가 이렇게 구현되었다구요..?" 기획팀이 디자인 결과물을 보자마자 해주신 말이였어요! 힘들지만 뿌듯했습니다ㅋㅋㅋ
비포 앤 애프터이 중에서도 저희가 각별히 신경 쓴 부분은 바로 저희 세이브 제품을 픽셀화 한 건물과 각 오브젝트들입니다. 세이브에서 주최하는 페스티벌인만큼, 세이브 패키지 디자인을 살려 각 오브젝트마다 텍스트를 직접 그려 넣었고, 눈에 잘 보이도록 하기 위해 엠보스 효과를 주었습니다.
작은 픽셀 단위로 제작을 해야했기 때문에 제품을 자세히 모사할 수 없어 몇 가지 요소만 강조하여 표현하였어요. 아래 이미지의 좌측 이미지는 페스티벌 전용으로 새롭게 디자인된 세이브 제품이에요. 페스티벌 안에서는 건물과 오브젝트로 활용되었답니다.
좌: 세이브 실제 제품 (프리미엄 콘돔 -3pcs) / 우: 게더타운용 디자인 
세이브 전제 제품 라인실제 제품과 비교하니 어떤가요? 비슷한가요~? (✌’ω’)✌ ✌(‘ω’✌)
4. 에셋 소개
4.1 세이브 쇼룸 외부
'세이브 쇼룸'은 세이브의 대표 제품인 세이브 프리미엄 콘돔(3pcs)을 픽셀화시킨 결과물입니다. 일반적인 건물 모양으로 쇼룸을 표현할 수 있었지만. 좀 더 세이브만의 페스티벌 느낌을 내고 싶었어요! 당당페 당일에 이 쇼룸에 온 모든 참가자분들은 이 쇼룸 안에서 실제 세이브 제품을 구매할 수 있었답니다. 그것도 50% 할인된 금액으로요!
세이브 쇼룸 외부
실제 세이브 프리미엄 콘돔(3pcs) 제품 사진4.2 세이브 쇼룸 내부
세이브 쇼룸에 들어오시면 등장하는 내부 공간이에요! 컬러 변경이 가능한 기본 제공 오브젝트들(쇼파, 램프, 식물 등)을 이용하여 내부 인테리어를 조성하였고, 자체 제작한 세이브 제품에는 모두 인터랙션을 넣어 각각의 상품 상세페이지로 연결하여 구매를 유도하였어요.
세이브 쇼룸 내부또한, 쇼룸 가운데 놓여진 TV는 세이브의 브랜드 소개 영상으로, 저희 브랜드를 잘 모르는 참가자들에게 영상 하나만으로 세이브를 이해할 수 있도록 하였습니다. 참가자분이 영상 콘텐츠임을 쉽게 인지할 수 있도록 인터랙티브 오브젝트의 모양을 TV형태로 시각화하여 표현했답니다.
4.3 세이브 도서관
'세이브 도서관'은 세이브의 베스트셀러템인 세이브 프리미엄 콘돔 대용량(24pcs)을 픽셀화시킨 결과물입니다. 외관은 우리가 생각하는 도서관의 모습처럼 생기지 않았지만, '쇼룸'과 '도서관'에 세이브 대표 제품을 활용함으로써 브랜드 아이덴티티를 확보할 수 있었어요.
세이브 도서관 외부
실제 세이브 프리미엄 콘돔 대용량 (24pcs) 제품 사진세이브 도서관에 들어오면 세이브의 여성주의 웹 매거진 'SAIB−SAID'의 아티클을 읽어볼 수 있도록 셋팅해두었어요. 내부 디자인은 도서관 분위기의 컨셉으로 정했고, 책 형태의 오브젝트를 별도로 제작하여 배치해두었습니다. 당당페와 비슷한 톤앤매너의 SAIB−SAID 콘텐츠 5개를 선정하여 각 오브젝트마다 인터랙션을 주어, 페스티벌을 즐기면서 몰랐던 성에 대한 다양한 정보를 접할 수 있도록 했습니다.
세이브 도서관 내부4.4 당당페 프로그램별 공간
당당페에는 시간별로 진행된 네 가지 고정 프로그램이 있었는데요, 별도의 공간이 필요했기 때문에 총 세 군데의 전용공간을 만들어야 했습니다.
• OX퀴즈관 건물: 올바른 성건강 지식을 알려주는 OX 퀴즈 세션이 진행된 공간
• 성감대워크샵 건물: 건강한 섹스 라이프를 위해 알아보는 성감대 지도 그리기 세션을 위한 공간
• 광장 내 메인 무대: 당당토크쇼와 경품추천 세션을 위한 공간
4.4.1. OX퀴즈관 건물
프로그램 공간은 세이브 제품이 아닌 일반적인 건물로 디자인 했습니다. OX퀴즈관 같은 경우에는 해변에 위치한 점과 당당페 컨셉을 고려하여 모래성 느낌으로 제작했어요.
4.4.2. 성감대 워크샵 건물
4.4.3 광장 내 메인 무대
당당토크쇼는 저희 세이브앤코의 수장이신 박지원 대표님, 산부인과 전문의 박정윤 선생님, 성교육 전문 로하 강사님이 진행하신 토크쇼인데요. 참여자가 당당페 신청 시 남겨주었던 '성에 대한 고민'을 바탕으로 진행된 참여형 토크쇼입니다.
이 무대를 제작하면서 가장 어려웠던 지점이 있었는데요. 바로 무대 바닥을 표현하는 것이었습니다. 자칫 평면으로 보일 수 있는 무대에 그림자를 더해, 벽면과 바닥이 수직으로 보이도록 보완하였습니다.
4.5 당당사진관(=포토존) 외부
페스티벌 하면 포토존이 빠질 수 없죠! 당당페의 추억을 사진으로 영원히 박!제! 할 수 있도록 포토존을 디자인했습니다. 사진관 컨셉의 건물을 디자인했고, 공간 내부에 포토존을 배치하여 참여자들이 자유롭게 사진(스크린캡쳐)을 찍을 수 있도록 했어요. 평범한 건물의 형태로 디자인했고, 그 위에 간판을 배치하여 사진관 느낌이 날 수 있도록 했습니다.
사진관은 맵 내 총 2군데 배치되었는데요. 두 사진관을 구분하기 위해 해변 가까이 위치한 사진관은 바다 컨셉의 에메랄드 계열 컬러를 사용하였고, 육지에 위치한 사진관은 평범한 구옥 컨셉으로 레드브릭 계열의 컬러를 주었습니다.
당당사진관(육지) 외부 / 레드브릭 계열의 컬러 사용 
당당사진관(해변) 외부 / 바다 컨셉의 에메랄드 컬러 사용4.6 당당사진관(=포토존) 내부
포토존의 내부는 인스타그램 피드 템플릿을 활용했어요. 사진관 내부로 들어오면 인스타그램 피드 이미지만이 배경으로 등장하며, 참여자들이 이미지 위에서 자유롭게 이동할 수 있어 본인이 원하는 위치에서 사진 촬영이 가능했답니다. 해변가 내 기본 에셋(게더타운 제공)과 세이브가 자체 제작한 에셋들을 적절히 섞어 시원한 해변에서 즐기는 페스티벌을 표현했습니다. 실제로 해변가에 있는 포토존이 인기가 많았더라구요.
당당사진관별 내부 공간아참 포토존에서 찍은 사진을 본인 인스타에 공유하면 세이브 프리미엄 콘돔(3pcs - 7,900원)을 무료로 제공하는 특별 이벤트까지 진행했답니다!
당당사진관에서 찍은 사진을 공유한 참가자들5. 효과적인 인터랙션을 위한 디자인 팁
저희가 원했던 결과는 사람들이 인터랙션이 있는 오브젝트 발견 시 "아 이 오브젝트는 나의 액션이 필요하구나. 나에게 뭔가 정보를 주려고 하는구나" 였어요. 그래서 우리가 굳이 알려주지 않아도, 사용자가 '알아서' 우리가 바라는 특정 액션을 취하도록 말이죠.
• 느낌표
단순한 오브젝트라고 생각하고 지나칠 가능성이 있다면 어떠한 표시를 해서 인터랙션이 있음을 간접적으로 알려주면 좋아요. 저희는 그 기능으로 느낌표 표시를 사용했어요. 자판기와 쇼핑백 등 오브젝트 위에 느낌표를 배치하여 사용자들이 인터랙티브 오브젝트임을 인지할 수 있도록 했습니다.
• 안내 키오스크
당당페 맵 내에서 참여할 수 있는 모든 콘텐츠 및 프로그램에 대한 간단한 설명을 안내 키오스크 형태로 제작했어요. 누구나 안내판임을 인지할 수 있도록요.
• 안내문
픽셀 아트로 표현된 게더타운 내 에셋들과 잘 어우러지도록 레트로, 픽셀 느낌의 폰트를 활용했어요. 안내문의 각 페이지는 디지털 가상 세계인 게더타운의 정체성에 맞게, 컴퓨터의 팝업 화면처럼 보이도록 디자인하여 몰임감이 깨지지 않도록 했습니다.
• TV & 쇼핑백
게더타운 내에서 메인으로 진행되는 프로그램이 아니라면 어떻게오브젝트와 인터랙션 할 수 있도록 유도해야할 지 고민하다가 실제 도구의 모습을 사용하기로 결정했습니다. 실제 형태를 가져온다면 사용자들이 오브젝트의 기능에 대해 즉각적으로 인지할 수 있을 것이라 판단했거든요. 쇼룸의 TV는 영상시청을 유도하여 세이브라는 브랜드를 인지시키기 위한 목적 달성의 도구로 활용되었고, 쇼핑백의 경우, 세이브 자사몰로 랜딩하게 하여 실제 제품을 50% 할인된 금액으로 구매하도록 유도했어요.
6. 아쉬운 점 및 결론
1. 동시 접속 = 동시 저장 X
게더타운 에셋을 디자인하는 사람이 여러 명일 경우, 동시 편집이 안된다는 점을 몰랐었서 한~참을 고생했던 기억이 나네요.. 동시에 접속한다고해서 동시 저장이 되는 건 아니니 이 부분은 꼭 알아주셨으면 좋겠어요ㅋㅋ 당시 저희는 변경과 저장하는 시점을 팀원들에게 실시간으로 공유해야 했었죠..ᜊ( ' ⩊ '�)ᜊ
2. 사용자 이탈
오브젝트와의 인터랙션이 많았던 이번 당당페 프로젝트의 경우, 다른 서버 또는 플랫폼으로 랜딩되는 부분이 많았습니다. 어떻게보면 행사 도중 이탈 가능성을 제공해준 것인데요. 이 부분이 과연 사용자 경험에 있어서 100% 좋았을까라는 생각이 듭니다. 또한, 해상도 차이로 인해 몰입감을 방해하지 않았나 하는 아쉬움도 있네요.
3. 그럼에도 게더타운
하지만 게더타운은 다른 메타버스 플랫폼보다 진입장벽이 낮기때문에 가상 공간 내에서 우리의 브랜드를 표현할 수 있다는 점이 흥미로웠던 것 같아요. 싸이월드 시절에나 유행했던 픽셀아트를 2021년에 제가 직접 디자인하게 될 줄은 몰랐지만요.. ∠( ᐛ 」∠)＿
더 효율적이고 효과적인 오브젝트 제작이 가능하도록, 더 많은 기능들이 개발되고 보완된다면 더 다양한 행사를 기획하고 진행해볼 수 있을 것 같다는 살짝의 기대감을 가져보며...이 글을 마무리 하도록 하겠습니다!
긴 글 읽어주셔서 감사합니다. 이상 제인과 세미였습니다~~!!! ヽ〳 ՞ ᗜ ՞ 〵ง
✱세이브(SAIB)
여성이 여성을 위해 만든 건강하고 안전한 섹슈얼웰니스 브랜드, 세이브(SAIB)는 사회에 만연한 성에 대한 가부장적이고 보수적인 편견(BIAS)을 뒤집고자 시작되었습니다. 세이브는 국내 최초로 콘돔 전성분을 공개했으며, 여성의 몸에 불필요한 유해 물질을 배제하고 천연 유래 성분만 남긴 안전한 제품만을 만듭니다.
❤︎ 세이브 제품이 궁금하신 분들은 여기를 클릭해주세요!
✱당당페를 미처 즐기지 못한 분들을 위한 선물
✱ 3,OOO원 쿠폰
세이브 자사몰에서 1만원 이상 구매 시 사용가능.
쿠폰 코드 : SAIBLOVE09
✱ 쿠폰 등록 방법
1. 세이브 자사몰 방문 후 카카오로 5초 회원가입
2. MY PAGE > 나의 쿠폰 내역 > 쿠폰번호 등록하기
#메타버스 #게더타운 #게더타운포토샵 #게더타운디자인 #게더타운케이스 #게더타운포토샵디자인 #게더타운에셋디자인 #당당페 #당당페스티벌 #세이브앤코 #saibnco #세이브 #saib #세이브콘돔 #세이브청결제
