uibowl

uibowl님의 아티클

uibowl

uibowl

게임 UI/UX 레퍼런스, 유아이볼 게임 탭 오픈

안녕하세요, 유아이볼팀입니다.

여러분은 필요한 게임 레퍼런스를 주로 어디서 찾고 계신가요? 핀터레스트나 Game UI Database 같은 해외 사이트를 뒤지거나, 혹은 원하는 화면 하나를 보겠다고 앱을 직접 다운로드해 본 적 있으신가요?

상점 UI 한 장을 확인하려고 밤새 자동 사냥을 돌렸던 경험, 특정 콘텐츠 화면을 보기 위해 지루한 튜토리얼을 견디며 눈물겹게 레벨업을 했던 기억. 게임 업계에서 레퍼런스를 다뤄본 분이라면 한 번쯤 겪어보셨을 실무의 애환일 거예요.


그렇다면 게임 레퍼런스를 찾는 일은 왜 이렇게 어려운 걸까요? 

게임 UI/UX는 일반적인 커머스나 금융, SaaS 앱과 달리 고유의 세계관과 독특한 그래픽 스타일, 그리고 복잡한 인벤토리와 화려한 인터랙션이 유기적으로 맞물려 있어요. 여기에 잦은 업데이트까지 더해지죠. 완성도 높은 프로젝트를 위해 정교한 레퍼런스가 필수인데도, 막상 실무에 쓸 자료를 찾으려면 다음과 같은 벽에 부딪히곤 했어요.

기존 레퍼런스 수집 방식의 명확한 한계

단편적인 이미지의 한계: 핀터레스트 등에서 찾은 스크린샷은 단면만 보여줄 뿐이라, 유저가 실제로 겪는 플로우나 UI의 맥락을 파악하기 어려워요.

해외 레퍼런스 사이트의 아쉬움: 너무 예전 자료 위주로 아카이빙되어 있어, 빠르게 변하는 최신 트렌드를 따라가기 어려워요.

시간과 리소스의 낭비: 원하는 화면(예: 강화, 길드, 상점)을 보려고 게임을 새로 받으면, 진입 장벽을 넘는 데에만 디자인 구상 못지않은 에너지가 소모돼요.

자료를 '조사하고 수집하는 과정' 자체에서 오는 이 비효율을 누구보다 잘 알기에, 유아이볼이 게임 영역으로 발을 넓혔습니다. 일반 앱 디자인의 표준과 영감을 제시해온 유아이볼이, 이제 게임 UI/UX 실무자분들을 위한 든든한 레퍼런스 창고로 거듭나요.

이런 분들께 추천해요!

• "레퍼런스 찾다가 하루가 다 가요" — 자료 조사와 캡처에 쏟던 에너지를 아껴 비주얼과 크리에이티브에만 집중하고 싶은 게임 UI/UX 디자이너
• "화면 간의 흐름이 안 보여요" — 단순 이미지 한 장이 아니라 깊이 있는 시스템 구조와 매끄러운 유저 동선을 기획해야 하는 게임 기획자 및 PM
"타사 게임의 핵심 BM 연출이 궁금해요" — 상위 매출 게임들의 트렌디한 디자인과 연출 요소를 빠르게 파악해 프로젝트에 녹이고 싶은 아트 디렉터 및 업계 종사자

실무 인터뷰(UT)로 정립한 게임 맞춤형 탐색구조 설계

새롭게 탄생한 유아이볼 게임 탭은 여러 차례의 사용자 인터뷰를 거쳐 만들어졌어요. 어떤 기준으로 설계했는지 세 가지로 소개할게요.

1. 플로우(Flow) 중심 레퍼런스 구성

스크린샷 한 장으로는 UI의 진짜 기획 의도와 진입 맥락을 파악하기 어렵죠. 유아이볼 게임 탭은 기존 유아이볼의 강점이었던 플로우 중심 화면 구성을 그대로 가져왔어요. 원하는 화면의 단면만 보여주는 게 아니라, 유저가 진입해 행동하는 일련의 과정을 패턴별로 매끄럽게 확인할 수 있어요. 덕분에 다양한 게임이 유저 인터랙션을 어떻게 설계했는지, 그 기획 의도와 맥락까지 직관적으로 파악할 수 있죠.

상점/스토어 패턴 보기

2. 8개의 장르 및 4대 패턴 대분류 체계

게임 UI/UX는 장르마다 고유의 맥락과 구조를 가져요. 현업 실무자 인터뷰를 바탕으로 업계 전반에 통용될 수 있는 분류 기준을 세웠어요.  

• 현업의 목소리를 반영한 8개의 장르 분류

모호했던 장르 구분을 실무 관점으로 세분화하고, 실사RPG·캐주얼·퍼즐 등 실무자들이 가장 필요로 했던 8개 장르로 구성했어요.

캐주얼 게임 보기

• 게임 문법을 그대로 녹여낸 4개의 패턴 대분류

게임 내 맥락과 기능에 따라 플레이·콘텐츠, 상점·BM, 커뮤니티, 시스템·지원으로 대분류를 나누고, 그 아래로 세부 패턴을 정리했어요. 처음 방문하는 분도 원하는 화면을 곧바로 찾을 수 있어요.

상점/스토어 패턴 보기

3. 게임 전용 컴포넌트 태그와 특화 필터

단순한 패턴 탐색을 넘어, 조작키·쿨타임 같은 게임 특화 디자인 요소와 매출 정보·연출 필터 같은 차별화된 기능이 필요하다는 점도 인터뷰를 통해 확인했어요.

• 게임 전용 컴포넌트 태그 신설

게임 전용 컴포넌트 태그 12종 신설 조작키, 쿨타임, HP바처럼 게임의 편의성을 좌우하는 컴포넌트 요소들을 다음과 같이 새로 추가했어요.

추가된 컴포넌트: 
네비게이션&탭바, 등급&티어, 아이콘 그래픽, 조작키, 지도&맵, 잠금/미해금, 캐릭터, 쿨타임, 타이머, 프로필 이미지, HP바 게이지, 연출

네비게이션&탭바 UI 컴포넌트 보기

• 게임 맞춤 매출 필터, 연출만 보기 필터 제공

여기에 실제 게임 비즈니스의 특성을 세심하게 반영한 필터 기능도 더해졌답니다. 게임 시장에서는 MAU보다 매출 지표가 더 중요하다는 실무자 피드백을 반영해 월 매출 구간별 필터를 추가했어요. 또한 인터랙션이 핵심인 게임 특성에 맞춰 '연출만 보기 필터'도 더해 탐색 효율을 높였어요.

연출 UI 패턴 보기

3줄 요약

실무 인터뷰로 정립한 장르·패턴·컴포넌트 분류 설계로 원하는 레퍼런스를 한 번에 찾을 수 있어요.

게임 비즈니스의 핵심인 '매출 필터'와 인터랙션 요소를 모아보는 '연출만 보기 필터'로 탐색 효율을 높였어요.

플로우 중심 레퍼런스 구성으로 유저의 동선과 UX 맥락을 한눈에 파악할 수 있어요.

자주 묻는 질문 (Q&A)

Q. 기존 유아이볼(일반 앱 UI) 콘텐츠는 그대로 이용할 수 있나요?

A. 네, 게임 탭은 기존 유아이볼에 새롭게 추가된 영역이에요. 일반 앱 UI/UX 레퍼런스는 그대로 이용하시면서, 게임 탭에서 게임 전용 레퍼런스를 추가로 탐색하실 수 있어요.

Q. 매출 필터는 어떤 기준으로 구간이 나뉘나요?

A. 센서타워(Sensor Tower) 데이터를 기준으로 매출 정보를 합산해 구간별로 보여드리고 있어요.

Q. 신규 게임이나 업데이트된 화면도 빠르게 반영되나요?

A. 네, 최신 화면으로 꾸준히 업데이트하고 있어요. 보고 싶은 업데이트 화면이 있다면 support@uibowl.io로 편하게 알려주세요.

Q. 유아이볼 게임 커뮤니티도 있나요?

A. 네, 카카오톡 오픈채팅방으로 운영하고 있어요. 게임 UI/UX와 관련된 소식과 의견을 나누고 싶으신 분은 아래 링크로 들어와주세요.

유아이볼 게임 커뮤니티 참여하기


레퍼런스 수집에 쓰이던 시간과 에너지는 이제 유아이볼에 맡겨두세요. 모든 실무자분들이 오롯이 기획과 디자인에만 집중할 수 있도록, 유아이볼이 함께할게요!

유아이볼 게임 탭 바로가기

유아이볼

UI/UX 영감을 받을 수 있는 레퍼런스 사이트

0
0
uibowl

uibowl

총 300만원의 주인공을 찾습니다 (이번주 마감)

안녕하세요, 유아이볼입니다! 유아이볼이 어느덧 첫 번째 생일을 맞이해요! 그동안 아낌없이 보내주신 관심과 응원에 보답하고 싶은 마음으로, 특별한 이벤트를 준비했답니다. 유아이볼은 사실 하나의 사이드 프로젝트로 시작됐어요. 이렇게 한 걸음씩 성장해 올 수 있었던 건, 바로 여러분의 따뜻한 지지 덕분이에요. 그래서 이번 1주년을 맞아, 저희처럼 사이드 프로젝트에 도전하고 있는 디자이너분들을 응원하고, 지원하는 지원 이벤트를 열게 됐어요. 특히 대학생으로 구성된 팀이라면, 심사 결과와 상관없이 무조건 한 팀 이상 선정해 지원할 예정이에요! 미래를 향한 도전을 시작한 여러분의 첫걸음을, 유아이볼이 진심으로 응원합니다.

왜 이런 이벤트를 하게 됐을까요?
유아이볼은 ’작은 시작‘에서 출발한 브랜드예요. 그래서 누구보다도 잘 알아요. ‘자기만의 아이디어를 현실로 만들어가는 과정이 얼마나 용기 있고, 또 멋진 일인지요.` 이번 이벤트는 여러분처럼 끊임없이 무언가를 만들고, 도전하는 디자이너분들에게 응원을 보내고, 또 많은 분들이 사이드 프로젝트의 즐거움과 성장의 순간을 함께 나눌 수 있으면 좋겠다는 마음에서 시작했어요.

이벤트 참여 방법
[구글 폼]에 신청서를 작성해 주세요.
- 아래 항목들을 포함한 신청서를 작성해 주시면 참여 완료예요!
  https://forms.gle/DVEnUDFMVDn9NW6f6
-
신청서에 들어가는 내용은 다음과 같아요:
- 이름 / 전화번호 / 유아이볼에 가입된 이메일
- 팀소개 (자기소개)
- 사이드 프로젝트 소개 (진행하게 된 이유, 현재 진행 상황, 출시 여부 포함)
- 기획안 / 디자인안 / 개발안 중 1개 이상 첨부
- 댓글남긴 인스타그램 아이디

함께 도전하는 팀원을 해당 게시물에 멘션해주세요.

- https://www.instagram.com/p/DIc6rxrP0iV/?img_index=1
-
사이드 프로젝트를 함께하고 있는 팀원이 있다면 꼭 멘션해주세요.
- 응원해줄 친구 혹은 이벤트를 함께 알고 싶은 친구가 있다면, 친구를 멘션해도 좋아요 :)

지원 혜택
이번 이벤트를 통해 디자인적으로 뛰어나고 사이드 프로젝트에 열정을 쏟고 있는 3팀에게 ‘총 300만 원 규모의 지원금’ 전달드릴 예정이에요. 선정은 내부 심사 점수(70점)와 사용자 참여 점수(30점)를 합산해 진행되며, 지원금은 기타소득세(8.8%) 제외 후 지급됩니다.

1등 (1명) : 200만 원
- 유아이볼 뉴스레터, 아티클에 홍보 및 노출
- 유료 멤버십 1년 제공

**2등 (1명) : 70만 원
- 유아이볼 뉴스레터, 아티클에 홍보 및 노출
- 유료 멤버십 1년 제공

**3등 (1명) : 30만 원
- 유아이볼 뉴스레터, 아티클에 홍보 및 노출
- 유료 멤버십 1년 제공

*유아이볼의 SNS, 뉴스레터, 웹사이트 등 다양한 채널을 통해 여러분의 프로젝트를 더 많은 사람들에게 알릴 수 있는 기회도 드려요.

이벤트 일정
- 신청 기간: 4월 15일(화) ~ 5월 31일(토) 자정까지
- 최종 발표: 6월 5일(목)
선정된 분들은 이메일과 유아이볼 공식 SNS를 통해 안내드릴 예정이에요!


지금 바로 참여하세요!
여러분의 열정이 담긴 사이드 프로젝트, 유아이볼이 함께 응원하고 싶어요. 이번 이벤트를 통해 새로운 가능성을 만나고, 서로의 도전을 응원하는 따뜻한 경험을 함께 만들어가요

유아이볼

UI/UX 영감을 받을 수 있는 레퍼런스 사이트

2
1
uibowl

uibowl

국내 최대 UI/UX 레퍼런스 플랫폼, 유아이볼

오늘은 국내 최대 UI/UX 패턴 플랫폼, 유아이볼에 대해 소개해 드리려고 해요. 유아이볼은 UI/UX 디자이너를 위한 UI/UX 디자인 영감을 받을 수 있는 플랫폼으로, 디자이너와 개발자의 협업 효율성을 높이고 레퍼런스 검색 시간을 단축하는 데 초점을 맞춘 서비스에요.

유아이볼의 주요특징은 4가지에요.

1. 28,000개 이상의 엄선된 UI/UX 패턴 제공

유아이볼은 디자이너 실무진이 엄선한 30개 분야의 질 높은 UI/UX 패턴을 제공하며, 앱을 다운로드하지 않고도 상세 정보를 확인할 수 있어요. 원래는 모바일만 제공하고 있었는데 UT를 통해 사용자분들이 웹사이트에 대한 니즈가 있다는 것을 파악하고 웹사이트도 제공하게 되었어요. 웹사이트 디자인 프로세스 과정이 궁금하신 분은 아래 링크를 클릭해보세요. https://uibowl.io/self-contents/cm3kfsl9d0002md0c40gupitw

2. 다양한 필터를 통한 서비스 검색

사용자가 원하는 UI/UX 패턴을 더 알맞게 추천하기 위해 다양한 필터를 제공해요. 현재는 MAU(월간 활성 사용자 수)와 컬러 8개, 카테고리 29개의 유형, UI/UX 패턴 52개를 제공하고 있고 UT를 통해 추가적으로 필터를 개선할 예정이에요.

3. Figma 플러그인 개발 완료

더 빠르게 UI/UX 패턴을 활용할수 있도록 피그마 플러그인을 지원해요. 종종 플러그인이 안된다는 문의도 받곤 하는데요. 피그마 플러그인은 웹 기반은 아예 안돼요. 데스크탑용 피그마를 꼭 설치하셔서 사용하시기 바랍니다. 피그마 디자인 프로세스가 궁금하신 분들은 아래 링크를 클릭해보세요. https://uibowl.io/self-contents/cm3kfwdji0002ju0cwuoqcq2g

- 데스크탑용 피그마 설치 : https://www.figma.com/ko-kr/downloads/

- 유아이볼 피그마 플러그인 다운로드 : https://www.figma.com/community/plugin/1416283003258937842/uibowl 

4. 디자이너 성장을 위한 부가 서비스 출시 (포트폴리오, 전자책, 워크샵)

디자이너의 성장과 학습을 지원하는 다양한 부가적인 콘텐츠를 제공해요. 어디서도 볼 수 없었던 콘텐츠를 통해 디자인 업무 역량을 강화해보세요.

+ 유아이볼은 기업과 연계하고 있는 실무 교육도 진행하고 있어요. 유아이볼을 통해 더 나은 UX를 고민하는 기업 관계자 분들 중 관심이 있으신 분은 유아이볼로 연락주세요. 실무 교육 예시 : https://uibowl.io/class/detail/cm21vedbv0002l70c4dp999pd


이상 유아이볼에 대한 소개였어요. 그리고 UT에서 자주 발견한 내용 중에서 사용자 분들이 아직 잘 모르는 기능을 소개해보려고 해요. (열심히 만든 기능을 홍보하기 위함이에요..)

✅  컴포넌트별로 UI/UX 이미지를 찾아볼 수 있어요.

최근에 34가지의 컴포넌트가 추가 되었어요. 이제는 날짜 피커나 팝업 같은 기능을 찾고 싶을 때 컴포넌트 기능을 활용하세요. 참고로 컴포넌트는 웹사이트에서만 가능해요.

컴포넌트 검색 관련 디자인 프로세스 링크 : https://uibowl.io/self-contents/cm3kfnvvg0002mo0c5josg5ag

✅  상세정보에 아티클로 넘어갈 수 있는 버튼이 있어요.

제품의 상세정보에 아티클로 넘어갈 수 있는 버튼이 있어요. 종종 앱서비스에서 바로 아티클로 넘어갈 수 있는 버튼이 있으면 좋겠다는 의견이 있었는데요. 최상단에 이렇게 배치되어 있답니다! 

✅  북마크 기능이 있어요

UI/UX 패턴을 북마크 하고 싶어하는 니즈를 UT에서 발견하고 북마크 기능을 추가했어요. 메뉴를 눌러야 나오는 투뎁스 구조라 사용자분들이 니즈가 있는 기능임에도 불구하고 잘 모르시더라고요. 곧 상단 메뉴로 위치를 변경할 예정이지만 북마크 기능 많이 활용해주세요. 

이렇게 유아이볼은 첫 UT 를 기반으로 많은 오류들을 고쳐가고 있어요. 유아이볼의 UT 프로세스가 궁금하시다면 아래 링크를 클릭해보세요. https://uibowl.io/self-contents/cm3kg0hco0006ju0c3cn07f2a

유아이볼

UI/UX 영감을 받을 수 있는 레퍼런스 사이트

5
1
uibowl

uibowl

컴포넌트 필터 오픈

표지.png

안녕하세요! 인턴 디자이너 이미영입니다.

컴포넌트를 찾으실 때 어떤 방법을 사용하고 계신가요? 특히 국내 앱에서 실제로 사용되는 컴포넌트 UI를 다양하고 정확하게 찾기 어려운 경험이 있으셨나요? 유아이볼은 이러한 불편을 해소하고자 새롭게 컴포넌트 필터 기능을 도입했어요.

이번 포스팅에서는 컴포넌트 탐색의 효율성을 극대화할 수 있는 새로운 필터 기능을 소개하고, 이를 통해 어떻게 원하는 UI 컴포넌트를 더 쉽고 빠르게 찾을 수 있는지에 대해 자세히 살펴볼게요!


컴포넌트 필터 기능 도입의 필요성

1. 실제 사용자들의 니즈 확인

유아이볼에서는 지금까지 두 차례의 UT에서 다양한 사용자와의 심층 대화를 진행해 왔어요. 이 과정에서 여러 참가자들이 컴포넌트에 대한 명확한 니즈를 가지고 있음을 발견할 수 있었어요.

브런치 글 이미지 1

먼저, UT를 진행하며, 항상 사후 인터뷰에서 개선사항이나 원하는 기능에 대한 질문을 드렸는데요. 해당 질문에 여러 참가자분들이 컴포넌트 탐색 기능에 대한 요청을 주셨어요. 일부 사용자분들은 유아이볼 외에도 다른 레퍼런스 사이트를 이용하며 컴포넌트를 찾는 과정을 설명해 주셨는데요, 특히 타 사이트에서는 컴포넌트별로 필요한 레퍼런스를 쉽게 찾아볼 수 있어서 이를 자주 활용한다고 말씀해 주신 분들도 있었습니다. 또한, 유아이볼 내에서 에셋이나 컴포넌트를 필터링할 수 있을 것이라 기대하고 찾아봤지만, 현재 해당 기능이 없어 탐색에 어려움을 겪으셨다는 의견도 있었어요.

이와 같은 컴포넌트 필터에 대한 니즈는 사용자의 직무와 경험에 따라 다양하게 나타났습니다. 학생이나 취업 준비생부터 현업 디자이너에 이르기까지 여러 유형의 사용자들이 필요로 했으며, 단순히 컴포넌트 UI뿐만 아니라 UX 라이팅과 같은 세부 요소에 대해 필터링을 원하시는 분들도 계셨어요.

저희는 UT에서 예상치 못하게 많은 분들이 컴포넌트 필터 기능이 필요하다고 느끼고 계신다는 점을 알게 되었어요. 이번 컴포넌트 필터 기능은 이러한 사용자들의 기대와 요구를 반영해 유아이볼에서 더욱 편리하게 컴포넌트를 탐색할 수 있도록 도와드리고자 도입하게 되었습니다.

2. 명확하지 않았던 일부 이미지 분류의 문제

브런치 글 이미지 2

현재는 UI 패턴에서 컴포넌트를 '기타'로 분류하는 것을 지양하고 있지만, 이전에는 토스트 팝업, 툴팁, 바텀시트와 같은 특정 컴포넌트를 포함한 이미지들이 '기타' 항목으로 분류되곤 했어요. 이 컴포넌트들을 따로 모아보는 것이 유용할 것 같았지만, 정작 적절한 분류 항목이 없어서 '기타'로 묶일 수밖에 없었죠.

저희 역시 사용자가 컴포넌트도 더 쉽게 탐색할 수 있도록 레퍼런스를 제공하고자 했으나, 이러한 애매한 사례에서는 적절한 대안이 부족한 상황이었어요. 이와 같은 경우에 바로 컴포넌트 필터 기능의 필요성을 더욱 느끼게 되었고, 이를 통해 사용자들이 필요한 컴포넌트를 보다 직관적으로 찾을 수 있도록 돕고자 했습니다.


컴포넌트 항목 구성

컴포넌트 필터 항목을 구성하는 과정에서 가장 큰 고민은 사용자들이 직관적으로 탐색할 수 있는 항목 구성을 만드는 것이었어요. 이를 위해 리서치를 통해 사용자 니즈와 기대를 구체적으로 파악하고자 했습니다.

브런치 글 이미지 3

먼저, 컴포넌트 필터를 제공하는 주요 경쟁사들의 사례를 분석하여, 각 사이트에서 공통적으로 제공하고 있는 컴포넌트 항목들을 조사했습니다. 이를 통해 가장 대중적이고 자주 사용되는 컴포넌트를 식별하였고, 이후 이들 항목을 빈도에 따라 분류하여 1차적으로 우선순위를 매겼어요.

그러나 많은 종류의 컴포넌트를 고려하게 되면서, 오히려 사용자가 탐색 시 혼란을 겪고 탐색 시간이 길어질 수 있다는 우려가 있었어요. 이에 따라 정보의 가독성을 높이고 탐색 효율성을 개선하기 위해, 항목들을 대분류로 한 번 더 묶어 구조화했습니다. 이렇게 구성함으로써 항목 간의 관계와 계층 구조를 명확히 하여 사용자가 각 컴포넌트를 쉽게 인식하고 이해할 수 있도록 했어요.

브런치 글 이미지 4

(밑줄은 웹에만 존재하는 항목이에요.)

최종적으로, 사용자가 쉽게 이해할 수 있도록 사용자와의 상호작용이 중심인 컴포넌트를 ‘컨트롤’, 화면 위에 중첩되는 컴포넌트를 ‘오버레이’, 현재 페이지의 상태를 전달하는 컴포넌트를 ‘상태’, 정보 전달을 주목적으로 하는 컴포넌트와 그래픽 요소를 ‘뷰’로 대분류 하였습니다.

이후, 각각의 컴포넌트 항목을 이러한 대분류에 따라 적절히 배치함으로써, 전체 컴포넌트 필터의 구조가 완성되었어요.


필터 디자인 작업

현재 유아이볼에는 기존 필터가 MAU, UI 패턴, 카테고리 유형, 컬러까지 총 4가지가 있는데요. 기존에도 필터를 다양하게 제공 중이다 보니, 새로운 필터를 어디에 위치해야 할지 고민이 많았습니다.

브런치 글 이미지 5

기존 필터의 위치에는 현재도 항목이 포화가 된 상태이기 때문에 새로운 위치에 필터를 두어야 했고, 저는 페이지 상단에 고정하여 구성을 했습니다. 1. 기존 필터만큼이나 바로바로 빠르게 자주 사용할 수 있어야 하고 2. 하단의 레퍼런스 이미지를 가리거나 방해하지 않는 위치가 페이지 최상단이라고 판단했습니다.

브런치 글 이미지 6

이제 UI의 위치는 정했으나, 이 많은 항목들을 어디에 위치하고, 어떻게 보여야 효과적으로 담을 수 있을지 고민했어요. 현재 상시 노출되고 있는 기존 필터의 항목도 많은 가운데, 다량의 컴포넌트 항목들까지 모두 노출한다면 매우 혼란스러울 것이라 생각하였고, 사용자가 원할 때에만 노출이 가능한 드롭다운을 이용하여 항목을 배열했습니다.

브런치 글 이미지 7

추가로, 필터의 성격 자체가 목적성을 가진 사용자가 주로 필터를 사용하기 때문에 많은 항목들을 더욱 빠르게 탐색할 수 있도록 검색 기능을 배치했어요. 일치하는 항목이 없을 경우에는 문의하기 버튼을 배치하여 다른 항목 요청을 쉽게 진행할 수 있도록 하였습니다. 혹시 찾는 항목이 없으시다면, 문의하기를 통해 공유해 주시면 개선에 반영하도록 하겠습니다.

브런치 글 이미지 8

항목의 대분류는 보편적인 서비스 사용 흐름에 따라 배열을 했습니다. 사용자와 상호작용이 가능하여 사용자 경험에 핵심적인 부분을 차지하는 '컨트롤'을 가장 먼저 배치하였고, '컨트롤'에 따라 페이지의 상태가 변화하기 때문에 '상태'를 그다음에 배치, 그리고 이에 따른 부가적인 반응이 '오버레이' 속 컴포넌트를 통해 주로 이루어지기 때문에 세 번째에는 '오버레이'를 배열했습니다. 마지막으로, 부가적인 그래픽 요소가 포함된 '뷰'를 가장 후순위에 배열했어요.


컴포넌트 필터 사용해 보기

1️⃣ 메인 화면에서 '컴포넌트' 칩을 선택해 원하는 항목을 찾아보세요.

브런치 글 이미지 9

1️⃣-1. 검색 기능을 활용하면 필요한 항목을 더욱 빠르게 찾을 수 있어요.

브런치 글 이미지 10

1️⃣-2. 처음 보는 항목이 있다면, 아이콘 위에 마우스를 올려 해당 컴포넌트의 기능과 역할을 확인해 보세요.

브런치 글 이미지 11

2️⃣ 필터가 적용된 항목에는 태깅 아이콘이 표시돼요. 

브런치 글 이미지 12

3️⃣ 두 개 이상의 항목을 필터링한 경우, 아이콘을 호버해 현재 선택된 컴포넌트를 쉽게 확인할 수 있어요.

브런치 글 이미지 13

4️⃣ 기존의 UI 패턴, 카테고리, 컬러 필터와 사용할 수 있어, 더욱 세밀한 탐색이 필요할 때 함께 사용해 보세요!

브런치 글 이미지 14


그동안 많은 사용자분들께서 요청해 주셨던 컴포넌트 필터 기능을 드디어 제공하게 되어 매우 기뻐요. 이번 컴포넌트 필터가 여러분의 레퍼런스 탐색 시간을 단축하고 효율성을 높이는 데 도움이 되기를 바라고 있습니다.

필터를 사용하시면서 추가적으로 필요하거나 원하는 컴포넌트 항목이 있으시다면, 언제든 문의하기를 통해 의견 남겨 주시면 감사하겠습니다.

감사합니다!


이제까지, UI/UX 패턴 플랫폼 '유아이볼'이었습니다.

유아이볼 패턴 링크 : https://uibowl.io/

 

더 빠르게 아티클과 앱 업데이트 소식을 듣고 싶다면 오픈채팅방 링크로 들어오세요.

https://open.kakao.com/o/gU1kVgTf

2
0
uibowl

uibowl

uibowl 웹사이트 패턴 오픈


안녕하세요. 인턴 디자이너 이미영입니다. 여러분은 주로 모바일 화면과 웹 화면 중 어느 쪽을 더 자주 작업하시나요? 웹 디자인 작업 시, 레퍼런스를 찾는 데 어려움을 겪으신 적은 없으신가요?

이번에 기존의 한정된 웹사이트 패턴의 탐색 범위를 넓힐 수 있는 새로운 기능이 오픈되었어요. 이번 포스팅에서는 이용 방법을 소개하고, 관련된 이야기를 나눠보려 해요. 함께 살펴보실까요?

브런치 글 이미지 1

웹사이트 바로가기 : https://uibowl.io/website


이 기능은 꾸준히 들어온 웹사이트 추가 문의를 바탕으로 개발이 시작되었어요.

저 역시 평소에 웹사이트 레퍼런스를 탐색할 때, 빠르게 원하는 자료를 찾는 데 어려움을 느끼고 있었어요. 해외에는 잘 정리된 웹 레퍼런스 사이트들이 많지만, 문화적, 분위기 및 스타일의 차이로 인해 국내에 적합한 참고 자료로 활용하기에는 한계가 있어요. 반면, 국내 레퍼런스 사이트는 레퍼런스의 분류가 모호하거나 단순히 사이트 주소를 아카이빙 해놓은 경우가 많아, 적절한 탐색이 어렵다는 문제점이 있었어요.


웹사이트 탐색 행태 알아보기

저희는 모바일과의 차이점을 파악하고, 웹사이트 패턴 제공 방식에 대한 정보를 얻기 위해 UT에서 웹사이트 패턴 탐색과 관련된 몇 가지 질문을 진행했어요.

먼저, 웹사이트 작업 시 주로 어떤 방식으로 레퍼런스를 찾는지에 대해 질문했어요.

(ex. 레퍼런스 사이트 참고, 직접 탐색 등)

이에 참가자분들은 이렇게 답변하셨어요. :

브런치 글 이미지 2

대다수의 참가자는 사이트가 아카이빙 된 레퍼런스 서비스를 사용하기보다, 직접 관련된 사이트를 찾아보는 경향이 있었음을 파악할 수 있었어요. 또한, 모바일은 다양한 유형을 함께 훑어보는 참가자들이 존재했는데요. 웹의 경우에는 모든 참가자가 작업 중인 웹사이트와 동일한 유형이나 기능을 우선적으로 찾는 경향이 있음을 알 수 있었어요.

다음으로, 레퍼런스 사이트를 사용해 본 경험이 있는 참가자들에게 어떤 서비스를 사용했으며, 주로 어떤 작업 및 상황에서 사용했는지 여쭤봤어요.

다음과 같이 답변해 주셨어요. :

브런치 글 이미지 3

국내는 지디웹, 디비컷을 주로 사용하셨고 해외는 어워즈, 모빈을 사용하셨다는 걸 알 수 있었어요.

현재 지디웹과 디비컷은 카테고리별 분류는 제공하나, 메인 페이지를 제외한 나머지 페이지의 화면은 제공되지 않으며, 지디웹의 경우 심사에서 선정된 사이트만 게시되어 있어요.

해외의 경우, 앞서 말씀드렸다시피 문화적 차이와 스타일의 차이가 디자인에도 반영이 되기 때문에 국내 디자이너들에게는 적합한 레퍼런스라고 말하기 어려운 부분이 있어요.


위 인사이트를 토대로 사용자에게 제공할 세부 기능을 정리했어요.

✅ 대다수의 참가자는 아카이빙 된 레퍼런스보다는 직접 관련 사이트를 찾아보는 경향

웹사이트는 인터랙션이 들어간 페이지가 많이 존재해요. 또한, 현재 UI 패턴 및 플로우를 모두 보여주는 레퍼런스 서비스가 존재하지 않기에 더욱이 사용자가 직접 경험해야만 하는 상황이에요.

특히나 접하기 어려운 B2B 서비스, 결제가 필요한 번거로운 구매 패턴 같은 경우를 모두 경험하기에는 한계가 있어요.

따라서 직접 접속하지 않아도 사이트를 경험할 수 있도록 (1) 인터랙션 영상 (2) 사이트의 모든 패턴을 기본적으로 제공해요. 추가로, 한 번 더 디테일한 경험을 만나볼 수 있도록 사이트 주소도 함께 제공해요.

✅ 모바일에서는 다양한 유형을 살펴보는 반면, 웹에서는 동일한 유형이나 기능을 우선적으로 찾는 행태

모든 참가자가 공통적으로 언급한 만큼, 카테고리와 UI 패턴 항목이 더욱 중요하다고 생각되었어요. 웹사이트는 모바일과 달리 랜딩 페이지처럼 새로운 항목이 있거나, 반대로 웹사이트에서 쓰이지 않는 항목이 있어 완전히 다른 필터 구성이 필요해요. 해당 기능은 다음 프로젝트에서 모바일과 함께 새롭게 개선할 예정이니, 조금만 기다려주세요!


웹사이트, 함께 살펴볼까요?

1️⃣ 상단탭에서 '웹사이트'로 이동해 주세요.

* 웹사이트가 추가되면서, 기존의 UI패턴 탭의 이름이 모바일로 변경되었어요.

브런치 글 이미지 4

2️⃣ 원하는 서비스를 선택하면, 해당 서비스의 패턴을 확인하실 수 있어요.

브런치 글 이미지 5

2️⃣-1. 마우스를 hover 할 때 나타나는 버튼을 통해 해당 사이트로 이동할 수 있어요.

* 상세 페이지는 서비스 이름 옆에 이동 버튼이 있어요.

브런치 글 이미지 6

2️⃣-2. 왼쪽 하단의 붉은색 아이콘은 해당 패턴의 인터랙션 영상이에요. 영상은 자동 재생돼요.

브런치 글 이미지 7

2️⃣-3. 이미지를 선택하면 더욱 큰 화면으로 확인하실 수 있어요.

브런치 글 이미지 8

3️⃣ 참고하고자 하는 카테고리 / UI 패턴 / 서비스 컬러를 선택해 더욱 빠르게 탐색해 보세요.

브런치 글 이미지 9

4️⃣ 플러그인을 활용해 이미지를 피그마로 손쉽게 불러오세요!

* 플러그인 사용방법 : https://brunch.co.kr/@boldydesign/93

* 플러그인 다운로드 : https://www.figma.com/community/plugin/1416283003258937842/uibowl

브런치 글 이미지 10


그동안의 꾸준한 웹사이트 추가 문의로 최대한 빠르게 개발이 진행되었는데요.

미흡한 부분이 있을 수 있으나, 곧 추가 UT와 필터 개선이 이루어질 예정이니, 앞으로의 발전을 기대해 주세요! 웹사이트 기능 추가가 여러분의 업무에 더 나은 효율과 인사이트를 가져다줄 수 있도록 더욱 노력하겠습니다.

개선 사항이나 웹사이트 제보 문의는 언제나 열려있으니 유아이볼 상단 탭의 '문의하기'나 오픈채팅방을 통해 편하게 남겨주세요!

감사합니다 :)


유아이볼은 국내 최대의 UI/UX 패턴을 학습할 수 있는 플랫폼으로 국내에 MVP 버전으로 출시한 지 3개월 만에 사용자가 월 6,000명이 넘었고 현재는 30,000명이 넘는 사용자가 이용하고 있어요.

유아이볼 링크 : https://uibowl.io/website

더 빠르게 아티클과 앱 업데이트 소식을 듣고 싶다면 오픈채팅방 링크로 들어오세요.

https://open.kakao.com/o/gU1kVgTf

14
3
uibowl

uibowl

유아이볼 피그마 플러그인 오픈

안녕하세요, 유아이볼의 인턴 디자이너 이미영입니다. 즐거운 추석 연휴 보내셨나요? 아쉬움을 뒤로하고 모두 일상으로 돌아오셨겠지만, 지난 연휴만큼 반가운 소식을 들고 찾아왔어요. 

바로 레퍼런스 이미지를 피그마로 손쉽게 가져올 수 있는 유아이볼 플러그인이 드디어 출시되었어요! 플러그인이 어떻게 탄생했는지부터 제작 과정, 그리고 사용 방법까지 함께 자세히 알아볼까요?

thumbnail.png

(플러그인 사용해 보기 : https://www.figma.com/community/plugin/1416283003258937842/uibowl)


플러그인이 왜 필요할까?

유아이볼팀은 약 한 달 전 UT를 진행했고, 그때 얻은 인사이트를 바탕으로 이번 플러그인을 개발하게 되었어요. 먼저 UT에서 어떤 인사이트를 얻었는지 공유드릴게요.
* UT 이야기는 여기서 보실 수 있어요! : https://brunch.co.kr/@boldydesign/66

첫 번째로, 사용자들의 레퍼런스 활용 및 작업 방식을 질문드렸어요.

보통 레퍼런스를 참고하며 작업하실 때, 어떤 방식으로 작업하시나요? (ex. 따로 레퍼런스 창을 띄워놓고 작업 / 디자인파일에 불러와 수시로 확인하며 작업 등)

참가자들의 답변은 이러했어요 :

2.png

이처럼 모든 참가자들이 작업 중 레퍼런스를 함께 확인하는 공통점이 있었고, 세 분은 복사-붙여넣기 방식을, 나머지 한 분 또한 플러그인을 사용해 피그마에서 확인하고 계셨어요.


두 번째는 북마크 이용 행태와 관련한 사용성 테스트를 진행했어요.

이미지 및 패턴을 북마크 한 후, 내역을 확인하는 과정을 테스트했는데요. 제가 요청한 필터링 조건 내에서 원하는 이미지와 패턴을 북마크 하고 그 내역을 확인하는 절차였어요. 여기서 얻은 핵심 인사이트는 참가자는 전부 유아이볼 이용 빈도가 높은 분들임에도 불구하고 북마크 기능의 존재를 아는 참가자는 20%에 불과했고, 모든 참가자가 북마크를 거의 사용하지 않았다는 점이었어요.

그 이유를 여쭤보니, 다음과 같은 답변을 들을 수 있었어요 :

4.png

이를 통해 사용자는 북마크 기능보다 직접 이미지를 저장하는 방식을 더욱 선호하고, 북마크의 필요성을 크게 느끼지 못한다는 점을 알 수 있었어요. 기대했던 것보다 북마크 기능의 활용도가 훨씬 낮았으며, 사용자는 작업 파일에서 이미지를 함께 확인하는 방법을 선호한다는 사실을 다시 한번 확인할 수 있었어요.


작업 프로세스를 줄일 수 있는 방법 탐색하기

UT를 통해 얻은 인사이트를 정리하고, 그에 대한 해결 방안을 모색하는 시간을 가졌어요.

작업 파일에 레퍼런스를 불러오는 방식 선호

대다수의 참가자분들은 작업 파일에 레퍼런스를 불러와 즉각적으로 쉽게 참고할 수 있는 작업 환경을 선호했어요. 따라서 북마크의 이용률도 현저히 낮게 나올 수밖에 없었어요.

비효율적인 콘텐츠 저장 방식

참가자분들이 작업 시 레퍼런스를 복사해 디자인 파일에 붙여 넣는 방식을 사용했지만, 여러 이미지를 가져오려면 생각보다 번거롭고 여러 단계를 거쳐야 했어요.

5.png

따라서 UT 결과를 바탕으로 두 가지 주요 목표를 설정했어요.

1. '유아이볼의 대표 사용자인 디자이너가 주로 사용하는 툴'인 피그마와의 연동을 통해 디자이너의 작업 환경에 밀접하게 다가가, 효율적인 작업을 지원해요.

2. '작업 프로세스를 간소화할 수 있는 방법'으로 이미지 단일/다중 임포트 기능을 제공하는 플러그인으로 작업 효율성을 높여요.

여러 UI/UX 디자인 툴 중에서 피그마를 선택한 이유는 UI/UX 디자인 소프트웨어 시장에서 피그마의 점유율이 약 83.4%에 달해, 대다수의 디자이너들이 피그마를 사용하고 있어 접근성이 높기 때문이에요.

피그마 플러그인은 반복적인 작업을 자동화하고 간소화할 수 있는 많은 편리한 기능을 제공하고 있어요. 플러그인 추천 포스팅을 읽어보면 공통적으로 '유용', '쓸모 있는', '시간 단축', '효율' 등의 단어를 많이 볼 수 있죠. 이를 통해 피그마 플러그인은 피그마에서 제공되지 않는 기능이나 특정 상황에서 효율을 높일 수 있는 기능이 필요할 때 사용된다는 것을 알 수 있어요.

유아이볼 역시 레퍼런스를 불러오는 과정을 간소화하여 불필요한 작업을 줄이고 작업 속도를 높이는 기능을 제공하고자 하는데요. 이는 기존의 피그마 플러그인의 효과와도 동일하다는 점을 확인할 수 있어요.


디자인 작업 & 플러그인 검수 요청

디자인 작업은 web 작업과 피그마 내 플러그인 작업을 함께 진행했어요. 먼저 여러 시안들을 제작한 후, 코멘트와 리뷰를 이어가며 디자인을 확정 짓는 과정으로 작업이 진행되었어요.

이번 디자인 작업에서 아쉬웠던 점은 다양한 케이스를 충분히 고려하지 못해 기능과 플로우에 구멍이 발견되었고, 이로 인해 개발 기간과 개발자분과의 커뮤니케이션이 예상보다 많이 늘어나게 된 점이에요.

기본적인 부분에서 실수를 했다는 사실에 협업하는 분들께 죄송하고 제 자신에게도 아쉬움이 많이 남았지만, 이 경험을 통해 CRUD 개념, 예외 케이스를 고려하는 부분에서 더욱 세심하게 진행해야겠다고 다시 한번 배울 수 있는 계기가 될 수 있었어요.

*CRUD : 소프트웨어에서 데이터를 처리하는 네 가지 작업. create(생성), read(읽기), update(수정), delete(삭제)를 의미하며, 이 네 가지 작업을 고려하여 디자인하면 기능이 누락되는 것을 막을 수 있어요.

플러그인 검수 요청은 어렵지 않게 진행할 수 있어요.

1️⃣ 배포할 플러그인의 오른쪽에 위치한 미트볼 메뉴에서 'publish new version'을 선택해 주세요.

6.png

2️⃣ 플러그인 이름, 설명 등 필수 항목을 모두 채워주세요.

자세한 설명은 피그마의 안내를 꼭 참고해 주세요 : https://help.figma.com/hc/en-us/articles/360042293394-Publish-plugins-to-the-Figma-Community#Creators_and_contributors

7.png

3️⃣ 모두 채우신 후, 오른쪽 하단의 'submit for review'를 눌러주시면 7~10일 내로 피그마의 검수 결과를 받으실 수 있어요.
(이미지는 이미 퍼블리시된 플러그인이라 문구가 달라요!)

저희는 주말 포함 5일 정도가 소요되었어요.

8.png


플러그인 함께 사용해 봐요!

이제 피그마 플러그인을 사용하는 방법을 알려드릴게요.

1️⃣ 유아이볼(https://uibowl.io/)에서 원하는 이미지를 hover하여 체크박스를 선택해 주세요.

9.png

2️⃣ 이미지를 고르셨다면, 사이트 하단에 생성된 '내보내기' 버튼을 눌러 주세요.

* 선택한 이미지를 초기화하고 싶다면, 초기화 버튼을 눌러 주세요.

10.png

3️⃣ 피그마로 이동해 플러그인을 실행한 뒤, '불러오기 버튼'을 선택해 주세요.

* 내보낸 후 버튼이 5초 동안 유지돼요. 동일한 이미지를 다시 내보내고 싶으시면, 사이트에서 '다시 내보내기'를 선택해 주세요.

11.png

아래의 릴스를 통해 더 쉽게 사용 방법을 익혀보세요!


이번 UT 결과의 인사이트를 바탕으로, 사용자에게 더 나은 경험을 제공하기 위한 기능 개발이 진행되었어요.

UT 전에는 유아이볼의 레퍼런스를 어떻게 활용하실지 가늠하기 어려웠지만, UT를 통해 사용자분들의 활용 방식과 선호하시는 다양한 부분들에 대해 명확히 파악할 수 있었어요. 이렇게 UT의 중요성을 다시 한번 깊이 느낄 수 있었던 기회였어요.

한 번의 UT 결과가 확실한 정답이 될 수 있는 것은 아니지만, 앞으로 멈추지 않고 계속해서 검증하고 개선한다면 분명 많은 분들께 좋은 경험을 전달드릴 수 있을 것이라 생각해요.

만약 플러그인 개선이 필요하다고 느끼신다면, 언제든지 말씀해 주세요. 소중한 피드백을 바탕으로 더 나은 경험을 제공해 드릴게요. 감사합니다!


유아이볼은 국내 최대의 UI/UX 패턴을 학습할 수 있는 플랫폼으로 국내에 MVP 버전으로 출시한 지 3개월 만에 사용자가 월 6,000명이 넘었고 현재는 30,000명이 넘는 사용자가 이용하고 있어요.

유아이볼 플러그인 다운로드 : https://www.figma.com/community/plugin/1416283003258937842/uibowl

유아이볼 링크 : https://uibowl.io/

더 빠르게 아티클과 앱 업데이트 소식을 듣고 싶다면 오픈채팅방 링크로 들어오세요.

https://open.kakao.com/o/gU1kVgTf

4
0