모든 화면을 같은 부품으로
CoUI는 코코드가 만들어 쓰는 UI 컴포넌트 시스템입니다. 버튼부터 표까지 160개 이상, 앱과 웹에서 똑같이 동작.
CoUI를 쓰면 달라지는 점
Without CoUI
매번 새로 그릴 때
- 화면마다 새로 그려 기간 증가
- 같은 버튼도 화면마다 제각각
- 앱과 웹 디자인 불일치
- 다음 팀이 화면마다 다른 코드를 읽어야 함
With CoUI
CoUI로 만들 때
- 만들어 둔 컴포넌트로 조립해 첫 화면이 빠름
- 컴포넌트 하나만 고치면 전체 반영
- 앱과 웹이 같은 컴포넌트 사용
- 다음 팀도 한 가지 규칙으로 전체 화면 파악
CoUI에 들어 있는 것
Tokens
스타일 값
색, 글꼴, 간격, 모서리를 한곳에서 관리
Components
컴포넌트 160개+
버튼, 입력창, 목록, 표, 대화상자
Theme
라이트 · 다크 모드
두 모드를 같은 컴포넌트로
Brand
브랜드 색 적용
고객사 색을 토큰만 바꿔 입힘
Responsive
화면 크기 대응
휴대폰부터 넓은 모니터까지
Base
Flutter 기반
웹, iOS, Android, macOS, Windows에서 같은 컴포넌트로
직접 보기
Button
Input
Chip
Toggle
Badge
Table
Select
Dialog
삭제할까요?
자주 받는 질문
CoUI 소유권은 누구에게 있나요?
CoUI는 코코드가 만들어 쓰는 UI 컴포넌트 시스템이라 소유권은 코코드에 있습니다. 대신 프로젝트에 쓴 버전의 소스 사본을 함께 넘겨드리고, 기간·수량·지역 제한 없는 사용권과 고쳐 쓸 권한을 계약서에 적습니다.
CoUI 코드를 저희 개발자가 고칠 수 있나요?
네. 소스 사본과 함께 고쳐 쓸 권한을 드리고, 유지보수를 다른 개발사에 맡기셔도 그 팀이 같은 권한으로 고칠 수 있습니다. 전체 화면이 한 가지 규칙으로 만들어져 있어 다음 팀도 구조를 파악하기 쉽습니다.
CoUI를 안 쓰고 만들 수도 있나요?
가능합니다. 다만 화면마다 새로 그리게 되어 기간이 늘어납니다. 상담 때 화면 목록을 보고 CoUI로 되는 부분과 새로 만들 부분을 나눠 기간을 비교해 드립니다.
CoUI가 업데이트되면 우리 서비스도 바뀌나요?
저절로 바뀌지는 않습니다. 넘겨드리는 CoUI는 사용한 버전의 소스 사본이라 고객사 쪽에서 관리합니다. 컴포넌트 하나를 고치면 그 컴포넌트를 쓰는 화면 전체에 반영됩니다.
CoUI로 만들면 다른 서비스와 비슷해 보이지 않나요?
색, 글꼴, 간격, 모서리를 스타일 값으로 한곳에서 관리해 고객사 브랜드에 맞게 바꿔 입힙니다. 위 갤러리에서 브랜드 색과 모드를 바꿔 보실 수 있습니다.
CoUI로 되는 화면부터 골라 드립니다
화면 목록을 보내 주시면 CoUI로 되는 부분과 새로 만들 부분을 나눠 봅니다.