[UI] 번역팩 UI

[vprwolf]

2024.09.16

번역팩 UI 아이디에이션, 와이어프레임, 1차 구성 시안

번역팩 UI관련으로 생각한 점

• 개인적으로 UI는 약간 페르소나 시리즈 분위기 나도록 한 점이 마음에 들었고, 디테일만 조금씩 보완해서 해당 분위기를 유지하는 것도 좋다고 생각했습니다!
• 레퍼런스로 생각한 것은 '페르소나 시리즈'의 UI, '이것은 게임이 아니다'의 기타 UI나 오브젝트 구성입니다!

• 개인적으로 '페르소나'의 볼드하고 색상 대비가 큰 UI분위기가 (비록 게임 자체는 페르소나와 좀 다르긴 하지만) 모노톤인 'Grayed Game'과도 어울린다고 생각합니다.
• UI내에서도 게임을 조종하는 요소가 있다는 점이 '이것은 게임이 아니다'의 구성과도 유사하다고 생각했는데요. 번역팩 탭 디자인의 경우도 이와 같이 좀 특성을 불어넣는 것은 어떨까 하는 생각도 했습니다.
• 또, '페르소나', '이것은 게임이 아니다'의 공통적인 요소로는 UI의 용도에 맞게 핸드폰이나 카드 등 사물적인 연출을 넣어줬는데 인게임에 영향을 끼치는 요소를 고려하면 'Grayed Game'또한 UI에 사물적인 모티프를 가져오는 것도 좋지 않을까 하는 생각을 했습니다!

기타 궁금증 및 UI구성에서 생각한 점

• UI내부에 언어 드롭 다운의 경우, 어떤 기능이 있는 것인지 궁금합니다!
• 번역탭의 경우, 1. 한 번만 활성화하면 지속적으로 번역할 수 있는 언어가 늘어나고,
  2. 한 번 활성화 되면 비활성화가 안 되게 막는 요소를 준다(자물쇠)
  3. 필수 포함 요소의 경우 활성화 ON 버튼 는 특성이 있었는데, 어차피 한 번 활성화 하면 다시 OFF할 상황이 없다는 면에서 토글 버튼이 있으면 조금 혼동이 있을 것 같아 토글 버튼 없이 활성화 상태를 강조하고, 활성화 하지 않은 팩은 클릭을 유도하는 테두리를 넣으면 어떨까 하는 생각을 했습니다!
• 또, 번역팩 리스트의 경우, 1.뱃지 형식으로 아이콘 형태 만으로 모아진 형식을 기본으로, 마우스 오버 시 이름이 뜨는 구성,
  2. 이름까지 포함한 탭을 각 테마에 맞게 꾸며 넣는 형식 두 가지를 생각했습니다! 해당 부분은 기획이나, 다른 분들 의견에 따라 더 맞는 방향으로 진행하겠습니다! UI내부 번역팩 디자인의 경우 추후 추가할 예정입니다!

Wireframe 도구적 성격을 조금이나마 보여주기 위해 파일과 노트 형태 차용 뱃지 형식 탭 형식

1차 구성 시안 볼드한 모노톤 구성 유지한 색상 기획서의 구성을 포함한 형태로도 1차 제작 진행했습니다! 뱃지 형식 탭 형식 구성 유지

추후 진행할 것

• UI방향성 좁히기
• 필요하다면 내부 뱃지/탭 형태 디자인

• 필요하다면 UI 디테일 구체화

  2024.09.19

  2차 구성 시안

적어주신 내용 기반으로 2차 시안을 올립니다! 탭부분 스타일 예시 작업을 진행했고, 노트 버전과 노트X버전 시안을 내봤습니다! 피드백 부탁드립니다.

노트ver. 좌측 아이콘

노트ver. 자체 탭

노트Xver. 좌측 아이콘

노트Xver. 자체 탭

[Sumindd]

기획적으로도 on/off 너무 좋아요!! there is no game이 실제로 Grayed Game의 대표 레퍼런스 중 하나입니다 ㅋㅋㅋㅋ 언어팩의 개수가 많지 않을 것 같고 GG의 핵심 기능 중 하나인만큼 조금 더 공들여서 뱃지 형식으로 해도 좋을 것 같고 환경 설정의 느낌을 좀 더 담아서 탭 형식이어도 좋을 것 같아서 행복한 고민이 드네요.... 저는 둘 다 좋습니다! 다른 분들 의견도 들어보고 싶어요 다만 노트 형식으로 좀 더 특색이 있어도 괜찮을지는 조금 고민이 되네요.. 설정적 충돌까진 아닌데 라플리의 고유 UI라는 설정은 있어서.. 이것에 대한 정안님이나 수빈님 이야기도 들어보고 싶고요(사소한 설정적인 부분이라)

[vprwolf]

오호..! 피드백 감사합니당. 언어팩 리스트나 UI틀 형태는 조금 상의가 필요할 것 같네용..!

[wooyn730]

어차피 한 번 활성화 하면 다시 OFF할 상황이 없다는 면에서 토글 버튼이 있으면 조금 혼동이 있을 것 같아 토글 버튼 없이 활성화 상태를 강조하고, 활성화 하지 않은 팩은 클릭을 유도하는 테두리를 넣으면 어떨까 하는 생각을 했습니다!

아이디어 너무 좋습니다! 근데 1차 구성 시안에 뱃지나 탭은 초록색으로 활성화 표시를 하는데, 기획적으로 라플리 고유 UI에 색이 들어가도 되나요?? (기획자들에게 질문)

뱃지와 탭

뱃지가 심플해서 좋긴 한데 언어팩의 개수가 많지 않으니 오히려 탭 형식이 좋을 것 같습니다 (수민님과 같은 이유 반대 의견..?) 뱃지는 여러가지 번역팩을 한 눈에 보여주기 쉽고, 탭은 번역팩의 이름까지 디테일하게 띄울 수 있는게 장점이라고 생각해서요! 개수가 적을 때 탭 형식이 장점을 잘 살리지 않을까 싶습니다.

도구적 성격을 조금이나마 보여주기 위해 파일과 노트 형태 차용

노트 형태를 사용하게 되면 주인공이 직접 자신의 노트를 확인하거나 작성하는 것 같은, 주인공을 좀 더 '살아있는 느낌'에 가깝게 만들어 몰입감을 높여줄 수 있다고 생각합니다. 'There is no game'은 알지만 직접 플레이해보진 않았는데, 게임 내에 유저를 대신하는 주인공이 없고 직접 게임과 상호작용? 하는 느낌으로 제작되었기 때문에 그런 연출을 넣어주지 않았을까 예상해봅니다.

하지만 이 게임은 메타픽션 게임이면서 주인공(라플리)이 존재하고, 유저와 라플리를 분리하기 위해 라플리의 대사를 최소화하여 자아를 죽이는 등의 방향으로 가고 있었기 때문에 저는 설정창다운 설정창이 가장 어울린다고 생각합니다!

(요 부분은 완전 제 주관적인 의견입니다 완전 노트 형태(내용까지 일기형식이거나)가 아닌 링 3개가 추가된 거라 세계관적으로 크게 문제 없을 수도 있다고도 생각합니다)

---

아이디어도 많이 내주시고 새로운 방향성도 제시해주시고, 생각한 것들을 다 적어주셔서 너무너무 좋습니다!! 결과물도 너무 좋네요 ^_^ b 고생하셨어용~

[fkdl0048]

와 문서화 진짜 잘해주시네요 진짜루

ON/OFF 관련

저도 뱃지가 조금 더 끌리는데, 개수가 그렇게 많을까? 라는 생각도 드네요. 그리고 라플리 고유 UI에는 색을 넣지 않았으면 해서 On/Off는 초록색이 아니라 진한 회색이나 검정으로 아웃라인을 줘도 알지 않을까? 싶습니다!

이런식으로 탭과 뱃지를 섞어서 해당 번역팩에 대한 이미지와 설명을 같이 제공하는게 좋을 것 같다는 생각도 듭니다.

UX적인 부분도 같이 고민해주셔서 정말 감사합니다..!

@wooyn730 도구적 성격을 조금이나마 보여주기 위해 파일과 노트 형태 차용

이 부분이 어디에 적혀있는 부분인지 제가 못찾아서 알려주시면 감샇반디ㅏ

[fkdl0048]

아아 이해했습니다..!

저도 우연님과 같은 의견입니다. 내부 UI부분은 정말 마음에 들고 On/OFF 관련 아이디어도 정말 좋지만, 결국은 게임이라는 틀을 벗어나지 못하는 역설적인 느낌으로 보여주면 좋겠습니다.

[vprwolf]

질문이 있습니다! 전체적인 번역팩 개수는 확정된 수량이 있는지가 궁금합니다.

[Sumindd]

확정된 수량 없습니다ㅠ CH1에 기계어 번역팩, CH2에 1개가 일단 나올 것 같은데 그 이후는 모르겠습니다.,

[vprwolf]

아하 그렇군요..! 수량이 적으면 일단 스크롤을 빼는 방식으로 갈까 해서 여쭤봤습니다!

[wooyn730]

많아봐야 4개 되지 않을가요.. (정해진 건 아무것도 없지만) 스크롤 한표~~!

[vprwolf]

2024.09.19 2차 구성 시안 업데이트합니다:)

[wooyn730]

노트Xver. 좌측 아이콘 한표용~

[fkdl0048]

저도 동일합니다! (노트Xver. 좌측 아이콘)

[roweclaw]

저는 노트Xver.자체탭이 더 끌리는데, 중앙 정렬 된 번역팩을 클릭하면 양 옆으로 회로판 디자인이 페이드 인 되면서 테두리가 on 되는 걸 상상했을 때 안정감 있고 잘 어울릴 것 같다고 생각해요!

다만 걱정되는 건, 다른 번역팩 이름이랑 회로판 디자인이 잘 어울릴지...? 회로판은 기계적인 특징은 잘 살려주어 '기계어 번역팩'과는 잘 맞지만, 예를 들어 '슬라임어 번역팩'이 생겼을 때 동일한 회로판 디자인이 들어가면 조금 이질적이지 않을까 걱정되는 부분입니다. '번역' 이라는 탭 아래 어떠한 '언어'가 있는지 그 특성을 담을 수 있다면 더 좋을 것 같아요! (예: '슬라임어'에는 테두리에 끈적이는 액체가 흘러내리는 등?)

노트Xver. 좌측 아이콘에도 같은 회로판 배경이 있는데, 이때에도 동일한 배경이 일괄적으로 적용되는 것은 고민해보면 좋지 않을까 합니다!

[vprwolf]

아하 아무래도 다른 언어 기준에서는 각각 특성이 드러나는 그래픽을 줄 생각을 하고 있었습니다! 이 부분은 추후 새로운 언어팩 작업을 하게 되면 반영될 것 같습니다! 이에 대해서는 다른 분들도 어떤지 이야기를 듣고 싶습니다!

[vprwolf]

일단 노트X라인으로 에셋을 올려드립니다! 탭 부분은 아이콘버전 자체탭 버전 둘 다 올렸습니다! https://drive.google.com/drive/folders/18mZp4KusEEPjeDJl1P2fUUMTQ6PRuMaP?usp=sharing 혹시 몰라 사이즈 확인용으로 피그마 링크도 올려드립니다.(마마고 팝업 UI도 포함합니다) https://www.figma.com/design/bznQdLM2sMV3fj0SHqzzpe/Untitled?node-id=0-1&t=WOO52WoxwlnZrraq-1 누락사항이나 문제사항 있으면 언급주세요!

[wooyn730]

저도 다른 언어팩은 다른 디자인으로 해주실거고 본문은 기계어 번역팩 복붙해서 배치만 보여주신거라고 이해했었습니다!

오히려 생각해보니 걱정되는 것은 1) 좌측에 아이콘을 둘 때 챕터1에서 얻는 것은 도트형식이고 다른 챕터에서는 다른형식으로 보여질텐데 그 것을 가져갈건지 or 본문 예시처럼 챕터1에서는 도트지만 번역탭에서는 벡터 통일되게 보여질 것인지 2) 화려하고 디테일이 생기는 장점도 있지만 그래도 라플리 고유 UI인데 너무 과해지지 않을지 정도가 있네요 ...

[wooyn730]

구드 확인했습니다! 설명 이미지나 피그마 주시는 거 너무 좋아요~~~ ^^👍

[wooyn730]

궁금한 점

왼쪽에 탭? 부분이 저는 선택되면 확대하고, 선택안되면 축소되는 거라고 생각했는데 두 스프라이트가 사이즈가 같은 걸 보니 그냥 선택하면 스프라이트만 바뀌고 소리탭이 작고 번역탭이 큰 건가요?

[vprwolf]

아하 선택시 스프라이트+사이즈가 아니라 스프라이트+위치값이 바뀌는 형식으로 제작했었습니다! 제가 세부사항을 빠뜨렸네요..ㅠ

[wooyn730]

아아 살짝 튀어나오고 살짝 들어가는거군요?

[vprwolf]

네네 맞습니다!

[wooyn730]

배치와 생각

(완성본이 아닙니다! 왼쪽 탭 활성화 등의 작업 안함) ('소리'는 번역에 맞춰 임의로 배치해보았습니다)

(1) 편의성을 위해 하단에 약간의 공간을 주고 우측하단에 '게임종료' 버튼을 넣었습니다 '게임종료' 버튼이 설정창에 필요할지는 논의해봐야할 것 같습니다... (기존에도 제가 임시로 넣었던 건데 일단은 있으면 끄기 편하긴 함)

(2) 본문에는 번역에서 왼쪽탭에는 번역, 중간 타이틀텍스트는 언어라고 되어있는데 왼쪽탭에서만 제목을 보여주고 타이틀 텍스트와 타이틀 텍스트 배경 이미지를 빼는 게 낫지 않나 싶습니다.

왜 다른 단어를 사용해야 하는지, 같은 의미로 쓰인다면 왜 두 번 언급해야 하는지 궁금합니다. (그리고 다른 단어를 사용해야 한다면 '소리'의 타이틀텍스트는 뭘로 해야하는지?) (또한 '번역'과 '언어' 단어를 둘 다 여기에 써버리면 추후 진짜 언어 변경(영어, 일본어) 단어랑 헷갈릴 것 같음)

(3) 지금 설정의 폰트와 SLG(마마고 팝업)의 폰트가 동일한데, 두 가지는 각각 다른 게임에서 왔다는 설정이므로 폰트도 달라야할 것 같습니다.

(4) base_attached는 base와 scroll_base를 합쳐서 주신 버전 같은데 설명에 추가해주시면 제가 보기 편합니다 ㅎㅎ (쪼끔 헷갈렸음) 그리고 꼭 분리되어야하는 기능이 있지 않는 한 합쳐진 버전을 사용하는 걸 선호합니다!

(5) 지금은 번역팩이 1개이고, 챕터2에도 1개가 추가로 등장하는데 아직은 스크롤바가 필요하지 않으므로 추~~~후 적용할 것 같습니다!

[fkdl0048]

1, 2, 3 내용은 따로 빼서 제가 좀 더 생각해보던가, 기획 회의에서 내용 구체화를 진행하겠습니다. 적어주신 내용 계속 정해야지 정해야지만 했던 내용이라 짚어주셔서 감사합니다!

[vprwolf]

2번은 저도 기획서 확인했을때 언어 드롭다운으로 표시돼있어 위 정리내용에 질문드렸었는데 아직 확답을 받지는 못했습니다..!ㅠ 한번 설명 부탁드립니다..ㅠ

[wooyn730]

@Sumindd

[Sumindd]

현재 설정탭만 있는 상황이고 여기에 번역탭이 추가 되는데 설정이라는 이름을 그대로 두면 번역탭이 설정과 분리되는 느낌을 받을 것 같아서 임시로 소리라고 탭 이름을 변경해뒀습니다. (지금 설정창에 사운드 관련 내용밖에 없어서 임시 이름) 번역탭은 게임적 요소지만 '설정창' 안에 자연스럽게 포함된 느낌을 주려고 했기 때문입니다. 그리고 드롭다운은 아마 개발적 사유로 분리 해뒀던 것 같은데(번역팩이 추가되는 구조여서) 만약 구현하는데 문제가 없다면 드롭다운과 번역이라는 큰 글자도 없애도 됩니다. 당시 기획 회의하면서 정안님에게 들었을 때 구조를 분리해야 한다고 이해했는데 제가 뭔가 잘못 이해한 것 같네요..? (이렇게 없애도 됩니다. 소리도 동일하게 없애주시고요!)

[vprwolf]

설명 감사합니다! 혹시 게임종료도 추후 버튼을 따로 만드는 것은 어떨지 제안해봅니다..