Konsta UI
웹으로만 만들던 기존 프로젝트와 달리 앱 출시가 메인인 프로젝트인 만큼 UI가 모바일처럼 느껴지는 것이 중요하다고 생각했다.
그래서 이번 프로젝트에서는 Konsta UI 라이브러리를 적용하기로 하였다.
Konsta UI는 React에서 iOS 디자인과 Material 디자인 모두 사용할 수 있게 지원해준다. 특히 단순히 theme 설정 값을 iOS <-> Material로 변경함으로써 환경에 적합한 UI를 보일 수 있기 때문에 웹 언어로 앱을 개발하고자 한다면 적합한 라이브러리일 것 같다.
 |  |
|---|---|
| iOS theme | Material |
이 라이브러리에는 아주 치명적인 단점이 있는데, 나온지 약 1년 정도 밖에 되지 않아 자료가 잘 없다... 사용자 수도 많지 않아서 github에 Konsta UI를 사용하는 모든 코드를 다 뒤져도 원하는 바를 얻지 못할 가능성이 크다. (경험담)
그래서, 오랜만에 블로그 글을 적게 되었다. 부디 사용자가 많아져서 관련 포스팅이 많아졌으면...
Konsta UI에 디자인 시스템 반영하기
🎨 색상
Konsta UI 공식 문서에는 Konsta UI 기본 설정을 일부 변경하여 사용할 수 있는 방법이 정의되어 있다. 이를 참고하여 디자인 시스템을 구축할 수 있다.
1. tailwind config 설정
// tailwind.config.js
const konstaConfig = require('konsta/config');
module.exports = konstaConfig({
konsta: {
colors: {
// "primary" is the main app color, if not specified will be default to '#007aff'
primary: '#007aff'
}
},
/*
* "Usual" tailwind colors can be used for some custom elements and styling.
* These colors will not suite for Konsta UI components theming
*/
theme: {
extend: {
colors: {
'my-red': '#ff0000'
}
}
}
// rest of your usual Tailwind CSS config here
...
});공식 문서는 위와 같이 tailwind config를 추가하도록 되어 있는데, 현재 프로젝트가 vite로 만들어진 관계로 위 형태를 그대로 사용할 수 는 없었다.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
import konstaConfig from 'konsta/config';
export default konstaConfig({
konsta: {
colors: {
'my-red': '#ff0000'
}
},
theme: {
extends: {
colors: {
'my-red': '#ff0000'
}
},
},
});따라서, 위와 같은 형태로 변경하여 사용하였다. (코파일럿의 도움을 받았다.)
참고 : tailwind config의 extends
tailwind config 파일에서 theme 내에 바로 colors를 적으면 기존에 tailwind가 제공하는 colors를 무시하고 새로 추가하는 colors만 반영하라는 의미가 된다. extends로 감싸서 colors를 추가하면 새로운 colors를 기존 colors에 추가한다는 의미가 된다.
tailwind.config.js 파일의
konsta: {
colors: {
'my-red': '#ff0000'
}
},부분이 없어도 tailwind에는 my-red를 포함한 클래스를 통해 색상을 변경할 수 있다. 하지만 위 부분을 추가하면, 컴포넌트 자체의 색상을 자연스럽게 바꿔줄 수 있다. 예시를 통해 자세히 살펴보자.
Konsta colors 속성 설정 예시
<button className="font-bold text-3xl">안녕하세요</button>
<button className="text-my-red font-bold text-3xl">안녕하세요</button>아무 색 설정이 되지 않은 버튼과 방금 추가했던 텍스트 색상을 적용한 버튼을 만들어보았다.
클래스 이름에 넣은 text 컬러만 바뀌는 것을 확인할 수 있다.
이번에는 Konsta UI 버튼 컴포넌트에 konsta 설정으로 넣은 color를 적용해보도록 하겠다.
<Button>안녕하세요</Button>
<Button className="k-color-my-red">안녕하세요</Button>Konsta 설정의 컬러는 k-color-[설정한 컬러 이름]으로 접근해야 한다.
적용 결과, Konsta 설정의 컬러는 텍스트 컬러가 아닌 버튼의 색상이 변경된다. 이 부분의 장점은 버튼의 종류를 바꿀 때 나타난다.
Konsta UI 공식문서 중 버튼 컴포넌트에 대한 내용을 살펴보면, Konsta UI는 Outlined, Clear, Tonal, Rounded 등 다양한 버튼 종류를 지원한다. 이를 다시 위 예제에 적용해보면,
<div className="flex gap-10">
<Button className="k-color-my-red">안녕</Button>
<Button className="k-color-my-red" outline>
안녕
</Button>
<Button className="k-color-my-red" clear>
안녕
</Button>
<Button className="k-color-my-red" tonal>
안녕
</Button>
</div>이렇게 적을 수 있다.
이제 결과를 확인해보면,
단순히 outline / clear / tonal 과 같이 버튼 종류를 입력하는 것 만으로도 각 버튼 종류에 적합한 버튼에 대한 모든 색상(버튼 색상, 폰트 색상, border 색상 등)이 반영된다.
 |  |
|---|---|
| clear 버튼 클릭 전 | clear 버튼 클릭 후 |
추가로 위 이미지처럼 클릭이벤트와 같은 동작에서 자연스럽게 변하는 UI도 적용이 된다.
cf) MUI와 다르게 별도의 hover 이벤트는 걸려있지 않던데, 아마도 모바일과 같은 경험을 지향하는 도구여서 hover에는 별다를 이벤트가 걸려있지 않은 것 같다.
2. 색상 코드 리팩토링
현 프로젝트의 경우, tailwind config의 theme 속성 color와 konsta 속성 color에 동일한 색들을 추가하였다.
이를 직접 추가하는 경우,
- 두 번의 중복된 코드를 작성해야 한다.
- 추후 색상이 추가되거나 변경될 때 어딘가에 누락되기 쉽다는 단점이 있다.
따라서, 리팩토링을 통해 색상 상수를 분리해줄 수 있다.
별도의 color를 관리하는 파일을 만들어
// colors.js
const colors = {
// 원하는 색과 색상 코드를 입력하기
}tailwind 설정 파일에 import하여 추가해준다.
// tailwind.config.js
...
konsta: {
colors: colors,
},
theme: {
extends: {
colors: colors,
},
},이렇게 하면 konsta 속성과 theme 속성에 동일한 색을 추가해줄 수 있다.
✍️ 타이포
1. 디자인 시스템 분석하기
tailwind에 타이포그래피를 적용하기 전에 피그마에 있는 타이포그래피 디자인 시스템을 분석해보자!
확인 결과,
- 폰트 사이즈는 Body1, Body2, Body3, Body4, Btn_text_1, Caption1, Caption2, Caption3 로 나타낸다.
- 폰트 두께는 SB, M, R 로 나타낸다.
- Headline과 Subhead는 폰트 사이즈와 폰트 두께를 모두 가진다.
이후 작업을 보다 용이하게 하기 위해서 각각의 폰트 사이즈나 두께를 개발자가 알 필요 없이 타이포 이름만으로 설정할 수 있기를 원했다.
마침, Konsta UI는 tailwind를 기반으로 만들어졌기 때문에 해당 타이포그래피 css 속성을 가지는 클래스를 만들면 해결할 수 있을 것이라 생각했다.
2. 타이포 클래스 생성하기
tailwind에는 다양한 플러그인들을 지원한다. 그 중 plugin의 addComponents 함수를 사용하면 새로운 스타일을 정의할 수 있다.
// tailwind.config.js
import plugin from 'tailwindcss/plugin';
...
plugins: [
plugin(({ addComponents }) => {
addComponents(
// 원하는 css 설정 정의
);
}),
],위 코드는 미디엄 아티클(Tip: Add Typography as Components to your Tailwind Config)을 참고하여 작성하였는데, 해당 아티클을 읽어보면 @apply를 이용하여 class를 추가할 수도 있다.
주석 부분을 구현하고 잘 적용이 되는 지 확인해보자.
<button className="typography-Headline">안녕하세요</button>
<Button className="typography-Headline">안녕하세요</Button>아래 사진을 확인해보면 일반 button 태그에는 스타일이 잘 적용이 되었지만, Konsta UI의 Button 컴포넌트에는 스타일이 적용되지 않는다.
여기서부터 이유를 알 수 없어 n시간을 헤맸는데 (깃허브에서 확인할 수 있는 Konsta UI 코드는 다 열어봤다...) 결국 해결했다.
3. 생성한 타이포 클래스 Konsta UI에서 사용하기
방법 1. 별도의 Span 태그 사용하기
이전에 써본 MUI와 달리 Konsta UI는 Typography 컴포넌트를 제공하지 않는다.
이를 보면서 별도의 Typography 컴포넌트를 사용하지 말고 span 태그를 사용하라는 의도일 것으로 생각하여 버튼 내부 텍스트를 span으로 감싸 style을 적용해보았다.
<Button className="typography-Headline">안녕하세요</Button>
<Button>
<span className="typography-Headline">안녕하세요</span>
</Button>Button에 Headline 클래스를 적용한 컴포넌트를 함께 만들어 비교해보았다.
확실히 적용이 된다.
하지만 이 방법에는 단점이 있다.
-
별도의 span 태그가 생긴다.
위 이미지처럼 Konsta UI의 버튼 컴포넌트는 원래 별도의 span 태그 없이 텍스트가 존재하는데, 위 문제를 해결하기 위해 span 태그가 추가됨으로써 DOM에 태그가 추가되는 것을 알 수 있다.
위와 같은 구조가 많아진다면 성능에까지 영향을 끼칠 우려가 있다. -
완전한 해결책이 아니다.
위 이미지에서 글자와 버튼에 간격을 주고 싶어서<Button className="p-10"> <span className="typography-Headline">안녕하세요</span> </Button>이렇게 padding을 추가해보아도 padding이 추가되지 않는다.
방법 2. important 활용하기
padding과 타이포가 왜 적용이 되지 않았는지 살펴보자.
개발자도구를 통해 해당 element의 style을 확인해본 결과, 위와 같이 취소선이 그어져있는 것을 확인할 수 있다. 이는 해당 스타일이 적용된 이후 Konsta UI에서 설정한 스타일이 적용되면서 추가한 스타일들이 무시되는 것으로 보인다.
<Button className="!p-10">
<span className="typography-Headline">안녕하세요</span>
</Button>이를 고려하여 앞선 예시의 Headline과 p-10에 !를 붙여 important로 바꿔줘보자.
성공적으로 p 태그가 적용되었다!
마무리
사실 CSS의 important를 남발하면 스타일의 우선순위가 복잡해진다는 이유로 지양해야 한다는 소리를 많이 들었다.
아마도 Konsta UI의 일부 css 변경이 important를 사용하지 않으면 잘 적용이 안 될 정도로 어렵게 되어 있는 것은 Konsta UI 자체로 iOS와 Material에 최적화된 뷰를 제공하기 때문에 색상/글씨체 등을 제외한 스타일은 최대한 변경하지 말라는 의미가 아니었을까 추측이 된다.
도움 By
