앱 디자인의 핵심, 색상은 어떻게 관리할까요?
앱 디자인에서 색상은 단순한 장식이 아니라 아이덴티티를 보여주는 핵심 요소예요. 브랜드 컬러를 앱에 잘 반영하면 사용자에게 익숙함과 일관성을 줄 수 있어요. 플렉스튜디오에서는 이런 색상 관리를 위해 테마색 기능을 제공하고 있는데요. 이번 글에서는 테마색을 만들어 앱에 적용하고 업데이트하는 과정까지 차례대로 따라가 볼게요.
플렉스튜디오 유튜브에서 영상 강의 보러 가기👇
1단계 : 시나리오에서 테마색 만들기
① 테마색을 새롭게 만드는 경우
1. 워크스페이스 - 시나리오 편집 화면으로 이동
2. 좌측 상단의 동그라미 버튼을 클릭
-
- 플렉스튜디오에서는 default라는 테마색를 기본으로 제공하고 있어요.
- 플렉스튜디오에서는 default라는 테마색를 기본으로 제공하고 있어요.
3. ‘테마색 설정’ 버튼 클릭
%ED%85%8C%EB%A7%88%EC%83%89%EC%84%A4%EC%A0%95/1-2%20%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%EC%97%90%EC%84%9C%20%ED%85%8C%EB%A7%88%EC%83%89%20%EB%A7%8C%EB%93%A4%EA%B8%B0_01.jpg?width=800&height=450&name=1-2%20%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%EC%97%90%EC%84%9C%20%ED%85%8C%EB%A7%88%EC%83%89%20%EB%A7%8C%EB%93%A4%EA%B8%B0_01.jpg)
4. 플러스(+) 버튼을 클릭하고 새로운 테마 추가 (예시 : dark)
✅ 플렉스튜디오의 테마는 두가지 영역으로 나누어져요
-
- 스탭 배경 ~ 메뉴 선택시 텍스트 : 공통 레이아웃 색상
- 메인 ~ 컬러10 : 컬러팔레트 색상
%ED%85%8C%EB%A7%88%EC%83%89%EC%84%A4%EC%A0%95/1-2%20%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%EC%97%90%EC%84%9C%20%ED%85%8C%EB%A7%88%EC%83%89%20%EB%A7%8C%EB%93%A4%EA%B8%B0_02.jpg?width=800&height=450&name=1-2%20%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%EC%97%90%EC%84%9C%20%ED%85%8C%EB%A7%88%EC%83%89%20%EB%A7%8C%EB%93%A4%EA%B8%B0_02.jpg)
5. 테마의 색상을 설정한 후 ‘저장’ 버튼 클릭
%ED%85%8C%EB%A7%88%EC%83%89%EC%84%A4%EC%A0%95/1-2%20%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%EC%97%90%EC%84%9C%20%ED%85%8C%EB%A7%88%EC%83%89%20%EB%A7%8C%EB%93%A4%EA%B8%B0_03.jpg?width=800&height=450&name=1-2%20%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%EC%97%90%EC%84%9C%20%ED%85%8C%EB%A7%88%EC%83%89%20%EB%A7%8C%EB%93%A4%EA%B8%B0_03.jpg)
6. 좌측 상단의 동그라미 버튼을 다시 클릭하여 새로 만든 테마색(dark) 선택
%ED%85%8C%EB%A7%88%EC%83%89%EC%84%A4%EC%A0%95/1-2%20%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%EC%97%90%EC%84%9C%20%ED%85%8C%EB%A7%88%EC%83%89%20%EB%A7%8C%EB%93%A4%EA%B8%B0_04.jpg?width=800&height=450&name=1-2%20%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%EC%97%90%EC%84%9C%20%ED%85%8C%EB%A7%88%EC%83%89%20%EB%A7%8C%EB%93%A4%EA%B8%B0_04.jpg)
② 컬러팔레트에서 색상을 수정하는 경우
1. 색상이 사용된 컨트롤 선택
2. 컬러피커 클릭
%ED%85%8C%EB%A7%88%EC%83%89%EC%84%A4%EC%A0%95/1-2%20%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%EC%97%90%EC%84%9C%20%ED%85%8C%EB%A7%88%EC%83%89%20%EB%A7%8C%EB%93%A4%EA%B8%B0_05.jpg?width=800&height=450&name=1-2%20%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%EC%97%90%EC%84%9C%20%ED%85%8C%EB%A7%88%EC%83%89%20%EB%A7%8C%EB%93%A4%EA%B8%B0_05.jpg)
3. 색상 팔레트에서 ‘테마색 설정’ 버튼 클릭
%ED%85%8C%EB%A7%88%EC%83%89%EC%84%A4%EC%A0%95/1-2%20%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%EC%97%90%EC%84%9C%20%ED%85%8C%EB%A7%88%EC%83%89%20%EB%A7%8C%EB%93%A4%EA%B8%B0_06.jpg?width=800&height=450&name=1-2%20%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%EC%97%90%EC%84%9C%20%ED%85%8C%EB%A7%88%EC%83%89%20%EB%A7%8C%EB%93%A4%EA%B8%B0_06.jpg)
4. 원하는 색상을 선택하고 ‘저장’버튼을 눌러 변경된 내용 저장
%ED%85%8C%EB%A7%88%EC%83%89%EC%84%A4%EC%A0%95/1-2%20%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%EC%97%90%EC%84%9C%20%ED%85%8C%EB%A7%88%EC%83%89%20%EB%A7%8C%EB%93%A4%EA%B8%B0_07.jpg?width=800&height=450&name=1-2%20%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%EC%97%90%EC%84%9C%20%ED%85%8C%EB%A7%88%EC%83%89%20%EB%A7%8C%EB%93%A4%EA%B8%B0_07.jpg)
2단계 : 앱에 테마색 적용하기
플렉스튜디오에서 테마색을 적용하려면 시나리오와 앱의 관계를 이해하는 것이 중요해요.
일반적인 앱 개발에서는 모든 화면이 하나의 앱 안에 포함되어 있어요. 하지만 플렉스튜디오에서는 하나의 시나리오를 여러 앱에서 동시에 활용할 수 있죠.
%ED%85%8C%EB%A7%88%EC%83%89%EC%84%A4%EC%A0%95/1-3%20%EC%95%B1%EC%97%90%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0_02.jpg?width=800&height=450&name=1-3%20%EC%95%B1%EC%97%90%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0_02.jpg)
일반적인 앱 개발에서 앱과 화면의 관계
예를 들어 회사 홍보앱과 쇼핑몰앱을 따로 운영한다고 가정해 볼게요. 두 앱 모두’ 공지사항’ 기능이 필요하다면 각각 따로 개발할 필요 없이 하나의 시나리오를 만들어 두 앱에서 함께 사용할 수 있어요. 또한 같은 시나리오라도 테마 색상을 다르게 지정할 수 있기 때문에 앱마다 고유한 분위기를 표현할 수 있어요. 홍보앱에는 파란색을, 쇼핑몰앱에는 주황색을 적용하면 같은 기능도 각 앱의 개성과 브랜드 톤에 맞게 자연스럽게 보여줄 수 있죠.
%ED%85%8C%EB%A7%88%EC%83%89%EC%84%A4%EC%A0%95/1-3%20%EC%95%B1%EC%97%90%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0_03.jpg?width=800&height=450&name=1-3%20%EC%95%B1%EC%97%90%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0_03.jpg)
플렉스튜디오 앱과 시나리오의 관계 예시
1. 워크스페이스 - 좌측 바에서 앱 선택 - 앱정보설정 탭으로 이동
%ED%85%8C%EB%A7%88%EC%83%89%EC%84%A4%EC%A0%95/1-3%20%EC%95%B1%EC%97%90%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0_04.jpg?width=800&height=450&name=1-3%20%EC%95%B1%EC%97%90%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0_04.jpg)
2. 앱 테마 색상 설정이라는 항목에서 ‘테마색 변경’ 버튼 클릭
%ED%85%8C%EB%A7%88%EC%83%89%EC%84%A4%EC%A0%95/1-3%20%EC%95%B1%EC%97%90%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0_05.jpg?width=800&height=450&name=1-3%20%EC%95%B1%EC%97%90%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0_05.jpg)
3. 원하는 테마를 선택하여 ‘라이브에 적용’버튼을 클릭하면 앱 전체에 자동 반영
%ED%85%8C%EB%A7%88%EC%83%89%EC%84%A4%EC%A0%95/1-3%20%EC%95%B1%EC%97%90%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0_06.jpg?width=800&height=450&name=1-3%20%EC%95%B1%EC%97%90%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0_06.jpg)
3단계 : 테마색 업데이트하기
앱을 운영하다 보면 색상을 바꾸고 싶을 때가 있죠. 이럴 때 플렉스튜디오에서는 간단하게 테마 색상을 업데이트할 수 있어요.
1. 시나리오 좌측 상단의 동그라미 버튼 클릭-
- 테마색의 영역별 색상 선택은 앱이 아니라 시나리오에서만 설정할 수 있어요!
2. ‘테마색 설정’ 버튼 클릭
%ED%85%8C%EB%A7%88%EC%83%89%EC%84%A4%EC%A0%95/1-4%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8_02.jpg?width=800&height=450&name=1-4%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8_02.jpg)
3. 색상을 변경하고 ‘저장’ 버튼을 누르면 시나리오에 바로 적용
%ED%85%8C%EB%A7%88%EC%83%89%EC%84%A4%EC%A0%95/1-4%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8_03.jpg?width=800&height=450&name=1-4%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8_03.jpg)
4. 앱에서 색상을 변경하기 위해 워크스페이스 - 좌측 바에서 앱 선택 - 앱정보설정 탭으로 이동
%ED%85%8C%EB%A7%88%EC%83%89%EC%84%A4%EC%A0%95/1-4%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8_04.jpg?width=800&height=450&name=1-4%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8_04.jpg)
5. 앱 테마 색상 설정 항목에서 ‘최신으로 반영’ 버튼 클릭하면 앱에서도 변경된 색상 적용
%ED%85%8C%EB%A7%88%EC%83%89%EC%84%A4%EC%A0%95/1-4%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8_05.jpg?width=800&height=450&name=1-4%20%ED%85%8C%EB%A7%88%EC%83%89%20%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8_05.jpg)
오늘은 플렉스튜디오에서 테마색 만들기 → 앱에 테마색 적용하기 → 색상 업데이트하기까지의 모든 과정을 알아봤어요.
이제 여러분의 애플리케이션도 브랜드 아이덴티티에 맞는 색상으로 더 완성도 있게 꾸며 보세요!