• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
What is app design?
간단하고 쉬운 답은 물론 "디자인은 당신의 앱이 어떻게 보이는지입니다." 이를 좀 더 자세히 살펴보겠습니다.
앱의 디자인 프로세스는 주로 두 가지 주요 분야로 나뉩니다.
UI and UX
UI (사용자 인터페이스)
앱의 전체적인 모양을 포함하며 페이지 레이아웃, 색상, 타이포그래피, 아이콘, 이미지 등을 다룹니다. 사용자 인터페이스 디자인은 앱이 시각적으로 매력적이고 브랜드 아이덴티티와 일치하도록 하는 것입니다.
UX (사용자 경험)
사용자가 앱을 어떻게 인식하는지에 중점을 둡니다. 탐색과 사용이 쉬운가요? 구조적으로 합리적인가요? 문제를 효과적으로 해결하나요? UX 디자인은 사용자의 여정을 이해하고 최적화하는 데 중점을 두어 인터페이스가 직관적이고 효율적이며 사용자 친화적인지 보장합니다.
이를 토대로 디자인 프로세스에서 중점을 둘 몇 가지 포인트를 도출할 수 있습니다.
•
앱은 좋아 보여야 하고 브랜드를 대표할 수 있는 일관된 디자인이어야 합니다.
•
이해하기 쉽고, 탐색하고 사용하기 쉬워야 합니다.
디자인은 물론 넓고 전문적인 분야입니다. 디자인 배경이 없다면 훌륭한 디자이너의 작업을 공부하여 아이디어와 영감을 얻는 것이 좋습니다.
Finding Inspiration
소프트웨어를 만드는 것은 예술과 과학의 조화입니다. 어떤 앱은 뇌의 자연스러운 확장처럼 느껴지고 어떤 것은 답답하게 느껴질 수 있습니다. 훌륭한 소프트웨어는 직관적이며 사용자의 필요를 예상하며 사용자가 계속해서 돌아오게 하는 즐거운 경험을 제공합니다.
매끄러운 앱이나 플랫폼 뒤에는 디자인 사고, 사용자 행동 이해, 기술적 능력의 정교한 결합이 있습니다. 이러한 우수한 소프트웨어에서 영감을 얻어 본인의 앱 구축 여정을 안내해 볼 수 있습니다.
이러한 앱을 사용자 인터페이스(UI), 사용자 경험(UX), 그리고 그들이 해결하는 문제를 자세히 연구하십시오. 특정 기능이 왜 특별히 마음에 드는지 스스로에게 물어보세요.
많은 앱 아이디어는 이미 하나 이상의 소프트웨어 범주에 속할 것입니다. 예를 들어 내부 프로젝트, 재고, 또는 회사의 HR을 처리하기 위한 소프트웨어를 작성하고 있다면 이미 비슷한 작업을 수행하는 기존 소프트웨어에서 많은 영감을 얻을 수 있습니다.
좋은 것이 무심코 우리를 지나가기도 합니다. 그것이 좋은 이유가 무엇인지 정확히 생각해 보지 않아서 좋은 것으로 느껴지는 것입니다. 이러한 앱에서는 정말로 좋아하는 것과 개선할 수 있는 것을 찾을 것입니다. 영리한 솔루션과 좋은 사용자 경험을 위한 것을 항상 주의 깊게 관찰하고 그 이유를 스스로에게 물어보세요.
Design resources
Bubble resources
Bubble에는 앱 디자인에 도움이 되는 많은 리소스를 제공하는 다양한 커뮤니티가 있습니다.
템플릿(Templates)
템플릿 스토어에는 다양한 템플릿이 있습니다. 템플릿은 디자인 뿐만 아니라 종종 프로젝트에 대한 훌륭한 출발점으로 사용할 수 있는 완전히 작동하는 앱을 제공합니다. 일부 템플릿은 다목적 앱에 중점을 두고 있으며 다른 것은 특정한 niche를 제공합니다(예: eCommerce, 작업 관리, 랜딩 페이지 등).
쇼케이스(Showcase)
Bubble은 수백만 개의 앱을 운영하며 고객의 성공 이야기를 게시하는 쇼케이스를 제공합니다.
Third-party resources
미리 디자인된 템플릿부터 사용자 인터페이스 가이드라인, 색상 팔레트 생성기, 글꼴 권장 사항까지 도와주는 도구와 플랫폼이 있습니다.
1.
디자인 템플릿: Dribbble, Envato Elements 또는 Behance와 같은 웹 사이트에서 전 세계 전문가의 디자인 작품을 볼 수 있습니다. 이것들은 당신의 앱 인터페이스에 영감을 주거나 시작점으로 사용할 수 있습니다. 일부 플랫폼은 다운로드 가능한 UI 키트를 제공하기도 합니다.
2.
색상 도구: Colormind, Adobe Color 또는 Coolors와 같은 웹 사이트에서는 눈에 즐거운 색상 구성을 생성하는 데 도움이 됩니다. 색상 심리학을 이해하고 앱의 분위기와 목적에 부합하는 팔레트를 선택하세요.
3.
글꼴: Google Fonts 또는 FontPair와 같은 도구를 사용하여 가독성과 미적으로 완벽한 글꼴 조합을 선택할 수 있습니다. 글꼴은 사용자 경험에서 중요한 역할을 하므로 텍스트가 다양한 디바이스에서 읽기 쉽도록 보장하세요.
4.
아이콘 라이브러리: 기본 아이콘보다 더 많은 아이콘이 필요한가요? FontAwesome, Iconfinder 등의 웹 사이트에서는 앱 디자인을 향상시킬 수 있는 다양한 아이콘 라이브러리를 제공합니다. Bubble의 플러그인 스토어에도 더 많은 아이콘을 제공하는 플러그인이 있습니다.
5.
모의 작업 및 프로토타입 도구: Figma 또는 Sketch와 같은 플랫폼은 앱의 상세한 모의 작업 및 대화형 프로토타입을 만들 수 있게 해줍니다. 이것은 최종 제품을 시각적으로 표현하는 데 도움이 됩니다. Bubble에는 Figma에서 디자인을 가져오는 도구가 있습니다.
6.
디자인 가이드라인: 초보자에게는 가이드라인을 따르는 것이 도움이 될 수 있습니다. Material Design(Google) 및 Human Interface Guidelines(Apple)은 일관되고 직관적인 사용자 경험을 생성하기 위한 원칙과 권장 사항을 제공합니다.
7.
피드백 플랫폼: UserTesting 또는 Maze와 같은 웹 사이트는 실제 사용자로부터 디자인에 대한 피드백을 수집하는 데 도움을 줄 수 있습니다. 개발 후에 재작업 시간을 아낄 수 있도록 이 단계에서 피드백을 수집하세요.
마지막으로 디자인은 단순한 미학이 아닙니다. 좋은 디자인은 문제를 해결합니다. 사용자에게 직관적이고 매끄러운 경험을 제공하는 것입니다. 올바른 도구와 사용자 중심 마인드셋으로 결정을 내릴 때, 좋아 보이는 것뿐만 아니라 목표 대상 사용자에게 적절한 느낌을 제공할 수 있는 디자인을 만들어낼 수 있습니다.
The design process
아이디어가 마련되고 필요한 영감과 리소스를 찾은 후, 그 디자인을 화면으로 전환하는 방법을 생각해 보아야 합니다. 이를 위한 다양한 방법이 있고, 옳고 그른 방법은 없습니다. 가장 편안한 방법을 스스로 결정하고 목표에 도달하도록 중점을 둡시다.
The tools
펜 및 종이/포스트잇
앱을 디자인하는 초기 단계에서 펜과 종이를 사용하는 것에는 아무 문제가 없습니다. 많은 사용자들이 새로운 도구를 배울 필요가 없어지고 직접 페이지에 뭔가를 그릴 때의 속도와 자유를 즐깁니다. 더 이상 필요하지 않은 것을 버리는 느낌도 좋습니다.
•
사용자가 가입할 때 필요한 필드는 무엇인가요?
•
어떻게 그 양식이 보이게 할 것인가요?
•
필드가 너무 많은가요?
모의 작업 및 프로토타입
다른 방법은 모의 작업 및 프로토타입 도구를 사용하는 것입니다(위의 목록의 항목 5에서 제안된대로). 이들은 마침내 앱에서 보이길 바라는 대로 화면에 아이디어를 그릴 수 있는 시각적 도구입니다. Figma와 같은 모의 작업 도구를 사용하는 것은 실시간 협업, 클라우드 저장 및 디자인을 Bubble에 직접 가져올 수 있는 기능을 제공하므로 매우 유용할 수 있습니다.
Bubble에서 디자인
Bubble은 여러분이 요소를 캔버스에 직접 배치하고 즉시 결과를 볼 수 있도록 설계된 시각적 WYSIWYG 편집기를 제공합니다. 이는 인기있는 프로토타이핑 도구와 유사한 방식으로 작동합니다.
여러분이 디자인을 계획할 때 이 접근법을 선택한다면 Bubble의 도구가 어떻게 작동하는지를 배우기 위해 메뉴얼의 디자인 섹션을 꼭 읽어보세요. 거기에서는 Bubble에서 디자인하는 마인드셋에 빠르게 익숙해질 수 있는 비디오 레슨에도 연결됩니다.
The UI Kit
디자인 프로세스를 효율적으로 유지하기 위해 UI 킷을 고려하는 것이 좋습니다. 이는 본질적으로 버튼, 아이콘, 폼 입력, 타이포그래피 및 기타 요소에 일관된 스타일 속성을 가진 요소의 컬렉션입니다.
일관된 디자인을 설정하고 유지하려면 먼저이 프로세스를 거치는 것이 좋습니다. 이것은 디자인 선택에서 일관성을 유지하는 데 도움이되는뿐만 아니라 각 개별 요소에 시간을 소비할 필요가 없어지므로 디자인 프로세스를 실제로 가속화 할 수 있습니다.
기존 앱에서 사용할 다양한 요소에 대해 생각하고 그 디자인을 한 곳에서 설정하세요. 이것은 페이지 또는 재사용 가능한 요소일 수 있습니다. 특정한 버튼이 필요할 때마다 해당 페이지에서 복사/붙여넣기하여 다른 곳에서 사용할 수 있습니다. UI 킷에서 얼마나 자세하고 고급스러운 디자인을 원하는지는 여러분이 결정합니다. 아래에서 몇 가지 다른 복잡성 수준을 제안합니다. 이것이 여러분의 첫 번째 앱이라면 기본 사항에만 중점을 둘 수 있습니다. 요소에 적용되어야 하는 모든 디자인 속성에 대해 생각하세요.
start with the basics
•
버튼: 다양한 크기와 상태로 제공됩니다. 주요, 보조 및 제3의 작업을 위한 디자인을 수행하세요. "취소" 버튼은 "확인" 버튼보다 덜 강조되기도 합니다.
•
입력 필드: 텍스트 필드, 드롭다운, 확인란, 라디오 버튼 및 슬라이더를 고려하세요.
•
내비게이션: 내비게이션 바, 사이드바 및 탭 바를 디자인하세요.
•
헤더 및 본문 텍스트: 헤더 및 단락에 대한 올바른 형식으로 텍스트 요소를 디자인하세요.
Expand to complex components
기본 구성 요소를 갖추면 더 복잡한 것에 도전하세요:
•
카드: 정보를 조직된 방식으로 표시하는 데 일반적으로 사용됩니다(예: 전자 상거래 스토어의 제품).
•
모달: 사용자의 관심을 끄는 팝업(경고, 확인 등).
•
테이블: 데이터 표시에 중요합니다. 페이지 나누기, 정렬 및 필터링을 고려하세요.
Interactivity and states
사용자는 인터페이스와 상호 작용하므로 다양한 상태를 고려하세요:
•
호버: 사용자가 위에 마우스를 올렸을 때 요소가 어떻게 보이나요?
•
활성: 요소를 클릭했을 때 무슨 일이 일어납니까?
•
비활성: 사용자가 클릭하거나 상호 작용할 수 없는 구성 요소(비활성 버튼 또는 입력 양식)를 인식할 수 있도록하세요.
save styles and style variables
UI 킷이 마음에 들면 다른 요소에 대한 스타일을 스타일로 저장할 수 있습니다. 이렇게 하면 스타일 속성이 이름을 가진 스타일로 저장되어 동일한 유형의 다른 요소에 적용할 수 있습니다. UI 킷을 완료한 후에 스타일을 설정하는 것이 좋습니다. 이렇게하면 전체적인 디자인을 검토할 수 있습니다. 폰트 변수 및 색상 변수도 앱 디자인을 추적하는 데 도움이 될 수 있습니다.
Add more elements as needed
새로운 유형의 요소가 필요할 때마다 UI 킷에 추가하는 습관을 들이세요. 이렇게하면 업데이트된 "카탈로그"를 유지하게 됩니다.
Building the page
UI 킷이 마음에 들면 실제 페이지를 작성하기 시작할 수 있습니다. 초기 색상, 폰트 및 요소를 설정하는 데 시간을 투자했기 때문에 앱의 전반적인 모양을 더 잘 파악할 것입니다.
가이드의 다음 섹션에서는 Bubble에서 앱을 생성하고 관리하는 방법을 살펴보겠습니다. 그런 다음 Bubble 에디터, 탭, 섹션, 도구 및 설정을 다루기로 하겠습니다.
Bubble의 디자인 도구를 사용하는 방법에 대해 더 읽고 싶다면 직접 디자인 글 시리즈를 계속 읽을 수 있습니다.
