포트리스 사가

게임 소개

포트리스 사가, Fortress Saga: AFK RPG

본격 요새 육성 RPG - 포트리스 사가 (Fortress Saga)

https://fortress.cookapps.com/

제작사

개발 : CookApps - BurgerMonster Studio

유통 : CookApps

플랫폼 : Android, iOS

출시일 : 2023.08.23.

엔진 : Unity

게임소개

북미풍 - 애니메이션 원화 스타일 아트 차용

맵을 진행해 나아갈 수록 스토리가 진행되는 형태는 아니고, 요새를 성장시키며 여러가지 대륙의 모습을 구경할 수 있는 식의 진행.

→ 성장 (레벨, 스탯, 마스터리, 별자리) / 요새 (대포, 수리공) / 영웅

던전 외에도 시설 기능을 통해 각종 재료를 획득할 수 있다.

고블린 비행선, 방랑상인, 채팅 기능 강화 등 유저의 접속 시간을 늘이기 위한 노력이 돋보인다.

북미풍의 종류

1) 마블, DC 코믹스 스타일

: 사실적인 인체와 근육 + 해칭과 먹칠을 통한 묘사 Inking

⇒ UI도 코믹스에서의 포맷에서 모티브를 얻어 디자인. (하프톤, 말풍선, 볼드한 폰트)

넷마블, <마블퓨처파이트> → 실사체. 데포르메 거의 없음. 자세와 구도를 통해 다이나믹함 연출. 글레이징 기법으로 묵직하게. 간접광을 통해 화려하게 + 배경에 붙지 않도록.

넥슨, <마블 배틀라인> → 어둠을 세게 눌러서 잉킹의 매력 살림. 얼굴과 머리카락에 약간의 데포르메를 줘서 코믹스 느낌이 더 나도록. 배경을 날려서 캐릭터에 집중되게.

'마블 배틀라인'은 어떻게 북미풍 아트를 그릴 수 있었을까?

아트에 대해 얘기할 때 흔히 북미풍, 동양풍이라고 구분하는 걸 들어본 적이 있을 거다. 북미 쪽은 근육질의 마초적인 걸 좋아하고 동양 쪽은 미소년, 미소녀 같은 슬림하고 예쁜 걸 좋아한다는 관념이다. 그렇기에 동양 아티스트가 북미풍으로 일러스트를 그린

https://www.inven.co.kr/webzine/news/?news=219338

What Are the Most Popular Comic Book Art Styles?

We take a dive into the most popular comic book art styles, from the 30s to the present, to help you discover yours Comic Printed by QinPrintingComic book art styles are as diverse as the stories...

https://www.qinprinting.com/blog/most-popular-comic-book-art-styles/

2) 애니메이션 원화 스타일

: 곡선으로 동세나 흐름을 부드럽게 표현 + 과감한 데포르메 + 말단으로 갈수록 뾰족해지는 실루엣

⇒ UI 디자인에서도 뾰족뾰족한 장식을 많이 사용하는 편.

⇒ 다른 북미풍 아트에 비해 입체적인 버튼을 많이 사용하지는 않음. 대신 패턴을 넣어서 단조롭거나 밀도가 떨어지지 않게.

⇒ 종이를 잘라 만든 것 같은 느낌을 살리는 편. 종이 모티프.

릴리스게임즈, <AFK 아레나> → 붓 터치 없음. 아주 약한 그라데이션. 2~3톤까지만 제한적으로 사용. 색을 섞지 않고 라인으로 겹겹이 배치해 명암 표현. 해칭.

쿡앱스, <포트리스 사가> → 날카로운 쉐입. 고채도 색 사용. 그라데이션 조금 세게.

3) 3D 애니메이션 스타일

: 동그랗고 큰 눈, 길다란 목, 동그란 코, 작은 턱, 큰 입.

⇒ UI에서도 동글동글한 느낌과, 입체적인 버튼, 화려한 색감을 많이 사용하는 편.

⇒ 역동적인 느낌을 살리고자 말랑말랑한 애니메이션 효과를 넣기도 한다.

⇒ 그라데이션 적극 사용.

Microfun, <씨사이드 이스케이프> → 고명도, 고채도 색감. 부드러운 그라데이션. 은은하지만 확실한 광원. 볼드한 폰트. 확실한 테두리. 입체적인 버튼 - 3d.

쿡앱스, <써니하우스> → 동글동글한 버튼과 폰트. 캐릭터 일러스트는 약간 날카로운 편. 사실적인 스티치 질감. 그라데이션 적극 사용.

4) 툰 스타일

: 디테일의 간략화 + 강약없는 두꺼운 선 + 도형 기반 데포르메 + 컬러풀한 색감 + 원화 스타일에 비해 말단이 동글동글.

⇒ UI 에서도 선을 두껍게 가져가고, 디테일한 문양보다는 버튼 자체에 입체감을 부여하고 그라데이션을 넣어 밀도를 높인다. 컬러풀한 고채도의 색감을 어떻게 잘 정리할지가 관건.

데브시스터즈, <쿠키런킹덤> → 선에 강약 부여. 먹음직스럽게 보이거나 귀엽게 만들기 위해 라이팅을 강하게 적용. 다채로운 색감. 밑바탕 색은 잘 섞어준 다음에 그 위에 라인으로 명확한 선이나 면을 만들어줘서 카툰 느낌이 나도록. / UI 아이콘도 통통하게. 젤리 느낌을 내기 위해 빛이 동그랗게 맺힘. 그라데이션 적극 사용.

쿡앱스, <테일드 데몬 슬레이어 : 라이즈> → 선의 강약 부여 + 약간의 해칭. / 날카로운 스타일의 툰 일러스트이기에 거기에 맞추어 UI도 동그라미만 두는 것이 아니라 뾰족뾰족한 포인트를 추가해 톤앤매너 맞추기. 캐릭터의 이미지를 살려 아이콘에도 관련 일러스트를 적극 사용. 버튼에 그라데이션 + 약간의 도톰함 부여.

장르

시뮬레이션 방치형 모바일 게임

AFK = Away From Keyboard = 방치형.

인게임 영상 + 스크린샷

웹 디자인 시스템 - 버튼 컴포넌트 스타일

이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼의 가시성 버튼마다 우선순위가 있다. 우선순위에 따라 가시성의 차이를 두어 디자인한다. 가시성 높음 (우선순위 높음) 가장 필요로 하거나 눌렀으면 하는 버튼 사용자가 쉽게 누르도록 눈에 띄게 디자인한다. 강조색(Primary, Secondary, Tertiary)과 브랜드 색을 주로 사용한다. 예: 로그인, 제출, 작성, 전송, 구매, 팔로우, 확인 등 가시성 보통 (우선순위 보통) 눌렀을 때 영향이 작은 평범한 버튼 잘 보이지만 튀지 않도록 디자인한다. 예: 공유, 도움말, 설정, 이전으로, 취소 등 가시성 낮음..

https://mesign.tistory.com/48

Main = Brown & Yellow

System (Enabled) & Positive = Yellow

Disabled = Dimmed or Ghost

System (Action) = Green

Extra Positive = Blue ??

Ads = Purple

Negative = Red

컬러계층 : Yellow > Purple > Blue > Green

→ 이 계층을 버튼에도 비슷하게 적용.

💡

플레이화면 영상

메인 상단 버튼 탐색 : 프로필 / 재화 / 친구-퀘스트-도감-메뉴(스토리, 공지, 인벤토리, 우편함, 설정) / 모험 / 시즌패스 / 패키지-이벤트

메인 하단 버튼 탐색 : 성장 - 요새 - 영웅 - 소환 - 시설 - 던전 - 상점

메인 플로우 : 성장 (+증축) - 퀘스트 완료 - 요새강화 - 캐릭터강화 - 시설관리 - 던전 - 전리품 교환 - 소환 - 퀘스트 완료

장점

1. 현장감, 공간감이 느껴지는 연출

: 방치형 게임류를 플레이했을 때, 게임 내에서 가장 다이나믹하고 화려한 전투 씬이 전부 가려지고 수치로 구성된 화면 위주로 보게 된다는 것이 아쉬웠다.

하지만 현장감과 공간감이 느껴지도록 화면 구성이나 연출에 디테일을 더했다. + 몰입도 ↑

1) 던전 씬 진입 시 가로 스크롤에 따라 빛의 각도가 변하는 연출.

2) 화면의 반을 할애해서 맵과 요새의 모습을 클로즈업.

3) 덜컹거리는 역동감.

2. 기능의 캐릭터화를 통한 몰입도 상승

: 단순히 뽑기로 처리할 수 있는 부분에서도 캐릭터를 중심으로 세워서 기능에 서사를 부여.

뽑기 레벨의 경우도 ‘친밀도’라고 말하며 유저에게 더 친근하게 다가감.

→ 다른 콘텐츠의 경우 뽑기레벨, 소환레벨 정도로만 이야기한다.

3. 콘텐츠나 정보 간의 연계가 부드럽게 설계

콘텐츠 간에 연관된 곳으로 스위칭이 부드럽게 진행되거나 숏컷이 마련되어 있어서 손쉽게 이동할 수 있다. 편의성 좋음.

1) 다른 탭을 보는 중에도 보스 출몰, 맵 정보 토스트 알람이 자연스럽게 뜬다.

: [세븐나이츠 키우기]에서는 화면 전체가 딤드되면서 UI가 모두 사라져 굉장히 불편했다.

→ 여기서는 조작해야 하는 부분이 아닌 가운데 부분에만 토스트 알람이 떠서 조작 가능.

2) 가시성 좋은 퀘스트 완료 알람 팝업

: 다른 콘텐츠를 이용하더라도 퀘스트가 완료되었다는 것을 바로 알 수 있도록.

→ [달토끼 키우기]에서는 오퍼시티가 들어간 그라데이션 딤드 위에 얹혀 있으니 가시성이 좋지 않았다. 가시성을 확보하기 위해서는 솔리드한 배경이 필요하다!

→ [세븐나이츠 키우기]에서는 퀘스트 완료 팝업이 따로 뜨지 않는다.

3) 요새 세부장비, 수리공 세부장비 스위칭 토글탭으로 전환할 수 있도록 처리

: 포탄은 요새의 세부장비이고, 키트는 수리공의 세부장비이다.

→ 이 두 가지를 토글탭으로 묶지 않았다면 이용하기에 아주 불편했을 것.

4) 보스 전투 중 다른 콘텐츠 이용 가능

: 소울 스트라이커 - 보스 전투 중에 이용 불가하다는 알림.

: 세븐나이츠 키우기 - 보스 전투 후 복귀하면 다시 처음부터 해당 스테이지를 시작해야.

→ 하지만 보스 전투가 꽤나 자주 이루어지는 편이기 때문에 불편했다.

한번 보스 소환 조건을 달성했으면 복귀했을 때 바로 소환할 수 있도록 유지.

보스 전투 중이더라도 진입 가능하도록.

5) 도감에서 맵을 이동하더라도 도감 탭이 꺼지지 않아서 바로바로 연결할 수 있다.

: 1000마리 잡기 퀘스트를 달성하기에 유리하다.

→ 다만 조금 아쉬운 점이 있다면, 모험 탭에서 1000마리 잡기 퀘스트를 달성했는지도 함께 확인할 수 있도록 도장이나 이런 걸 찍어줬다면 어떨까.

도장1 = 보스 클리어 / 도장2 = 1000마리 퀘스트 클리어

4. 깔끔한 리스트 정렬

: 게임을 플레이하다 보면, 완료한 퀘스트와 미완료한 퀘스트가 뒤죽박죽 섞여있는 것이 불편할 때가 많았다.

but 그런 부분에 있어서, 미완료한 부분이 있을 경우 바로바로 가장 위로 올라오게 설정해서 플레이하기가 편안하다.

단점

1. 홈버튼이 없어 거쳐야 하는 불필요한 뎁스

: 뒤로가기 버튼만 있어서 불필요한 터치를 여러번 해야 할 때가 적지 않다.

→ 홈버튼이 있다면 콘텐츠 사이를 더 부드럽게 이동할 수 있을 것!

2. 파티 설정 시 캐릭터의 포지션을 직관적으로 파악하기 어려움

콘텐츠 중에 ‘오리할콘 채광’이라는 콘텐츠는 <탑승형> 캐릭터가 아닌 <출격형> 캐릭터만을 배치해야 한다. 하지만 파티를 설정할 때 포지션 정보를 바로 확인하기가 어렵다.

포지션 관련 아이콘이 추가되었다. 하지만 탑승형-출격형은 여전히 누락.

요새 씬에서는 “자세히보기” 버튼을 누르면 되지만, 프리셋 팝업에서는 “자세히보기”가 지원되지 않아 더 번거로웠다.

영웅 씬에서 포지션 별로 캐릭터를 모아 볼 수 있는 옵션도 필요하지 않을까.

지금은 등급, 레벨, 전투력 등 순의 정렬 밖에 지원하고 있지 않다.
[붕괴:스타레일] 레퍼런스 - 이런 식의 팝업을 통해 옵션을 제공하는 건 어떨까.

3. 전리품 탭의 높은 뎁스

: 상점 씬에 들어갔을 때, “시즌패스” 탭이 디폴트로 설정.

하지만 전리품 탭의 이용 빈도가 꽤 높기 때문에, “퀘스트” 버튼처럼 숏컷을 만들어 주거나, 재화를 눌렀을 때 전리품 탭으로 바로가기 링크를 걸어주면 어떨까.

→ 상점에 자주 접근하게 만들기 위한 의도?

4. 조금 어수선한 인벤토리

: 재화를 가장 윗 줄에 나란히 배치하고 그 밑에 요리 재료를 두는 식으로 정리했으면 어떨까.

→ 또는 <재화>, <요리재료>, <강화재료> 식으로 그룹핑을 두는 식이라면.

5. 퀘스트 탭에서 완료한 퀘스트 목록이 잘 구분되지 않음

: 완료된 퀘스트와 미완료된 퀘스트가 섞여 있을 경우, 한 눈에 확실하게 구분이 되지 않는다.

→ WHY? 게이지가 초록색이고, 미완료되었을 경우의 바로가기 버튼도 초록색이기 때문에.

→ 도감 탭에서는 딤드 + 체크 표시로 확실하게 구분을 해주었다. 이 규격으로 통일하면 어떨까. (노란색 게이지)

6. 딤드 구역을 눌렀을 때 팝업이 꺼지지 않는 경우가 꽤 있다

: 자그마한 X 버튼을 누르는 것보다 팝업 바깥의 딤드 버튼을 누르는 것이 더 편리하기 때문에 최근에는 딤드 구역을 눌렀을 때에도 X 버튼과 같은 기능을 하도록 구현하는 편.

하지만 이것이 적용되지 않는 기능이 몇 가지 있었다.

→ 패키지 리스트를 제외하고는 적용되게 수정하면 어떨까.

친구탭

공지사항

패키지 리스트

닫기 버튼을 없애면 사용자 경험에 어떤 영향을 줄까? - 디스라이트 UX 분석

기대를 모으고 있는 릴리스 게임즈의 신작 게임 디스라이트(Dislyte)에는, 다른 게임에는 당연하게 있지만 디스라이트에선 찾기 힘든 것이 있습니다. 바로 'X' 모양의 닫기 버튼입니다. 이 게임에는 다양한 형태의 팝업이 등장하지만, 그 속에서 닫기 버튼을 찾기는 어렵습니다. 사용자가 화면을 닫고자 할 때 누르는 'X' 모양의 닫기 버튼은, 게임을 비롯한 각종 OS와 소프트웨어에서 보편적으로 사용하고 있습니다. 릴리스 게임즈의 전작인 AFK 아레나에서 또한, 쉽게 닫기 버튼을 찾을 수 있었어요. 그런데 디스라이트 개발진은 왜 팝업에서 닫기 버튼을 없앴을까요? 기존의 익숙한 사용자 경험을 따르지 않고 다른 시도를 한 이유는 무엇일까요? 팝업에서 닫기 버튼을 없앰으로써 얻을 수 있는 효과에 대해 알아보겠습니..

https://prettygoodsun.tistory.com/27

7. 영웅 장비 획득처에 대한 안내 미비

: 가이드 퀘스트 중 영웅 장비 5회 강화 퀘스트가 있었는데, 탭 시 강화 탭으로 이동.

하지만 장비를 어디서 얻어야 하는지를 안내해주지는 않는다.

→ “포트리스사가 장비” 라고 검색했을 때, 질문하는 사람들이 꽤 있었다.

⇒ Empty States일 경우, 관련 콘텐츠에 대한 안내문구나 숏컷을 제공해주는 게 어떨까.

UI 공백을 콘텐츠로 채우는 방법 | 요즘IT

건축 공간에 ‘사람’이 모인다면, 인터페이스에는 ‘사용자’가 머물다 갑니다. 두 공간 모두 견고한 맥락으로 설계되고, 공감이 오가는 정서적인 공간이 되기도 합니다. 때때로 공간을 둘러싼 환경은 예상치 못한 감각을 일깨우기도 합니다. 공간은 기분을 환기시키는 능력이 있으니까요. 이는 디지털 서비스에서의 공간도 마찬가지입니다. 세심하게 설계한 IA나 인터랙션 디자인, UX 라이팅 전략은 탐색과정에서 사용자의 감각을 일깨우는 요소로써 작용합니다. 특히 공백은 사용자의 감각을 일깨우는 UX/UI 공간으로 활용될 때가 많습니다. 이번 글에서는 UX 라이터와 디자이너 관점에서 공백을 다루는 방법에 대해 살펴보겠습니다.

https://yozm.wishket.com/magazine/detail/2067/

빈 화면 어떻게 구성할까?

담겨야 할 데이터가 없는 빈 화면을 채우기 위해 어떤 데이터, 행동이 필요한지 사용자에게 정확하게 인지시키고, 다음 액션을 유도하는 것은 정말 중요합니다. 따라서 오늘은 빈 화면 구성 방법에 대해 알아보도록 하겠습니다 :)

https://blog.wishket.com/빈-화면-어떻게-구성할까/

8. 공지사항의 내용 파악 어려움

: 공지사항이 통으로 구성되어 있어서 내용 파악하기가 어렵다.

→ 가로폭을 넓히고 네이버 라운지의 글과 연동되게 리스트화하면 유저들이 업데이트 내용을 직관적으로 파악하기 편하지 않을까.

아트 스타일 / 장르 호불호 - ◎

일러스트랑 배경 + 스파인이 귀여워서 아트 스타일이 마음에 든다.

방치형 장르 중에서 완성도가 높다고 생각. 사용자 편의성을 많이 고려했다.

아이콘의 완성도나 디테일의 밀도도 좋았다.

이렇게 컨셉이 확실하고 화려한 UI도 작업해보고 싶다.