피그마
제공된 라이브러리에 있는 TDS 컴포넌트로 디자인하는 방식을 추천해요.
UI 스타일을 직접 고민하지 않아도 되고, 개발 문서에 있는 코드를 기준으로 화면을 구성할 수 있어서
디자인과 개발을 빠르고 안정적으로 진행할 수 있어요.
1. 시작하기 전에: 피그마 권한 신청
TDS 라이브러리를 사용하려면 먼저 피그마 프로젝트에 대한 접근 권한이 필요해요.
- 채널톡으로 피그마 권한을 신청해 주세요.
- 초대가 완료되면, 피그마 좌측 Recents 메뉴에서 해당 프로젝트를 확인할 수 있어요.
2. TDS 컴포넌트 찾아서 사용하기
피그마에서 TDS 컴포넌트는 두 개의 라이브러리로 제공돼요.option + 2 단축키나 왼쪽 Assets 패널에서 컴포넌트를 검색해서 사용할 수 있어요.
- TDS Components for AppsInToss: 버튼, 리스트, 입력창 등 UI 컴포넌트 모음이에요.
- TDS Foundation for AppsInToss: 폰트, 컬러, 아이콘 같은 기본 디자인 요소들이에요.
컴포넌트 표시 의미
- 🔵 파란색 원: 개발 문서에 코드가 제공되는 TDS 컴포넌트예요.
- 🟣 보라색 원: 피그마에서는 사용할 수 있지만, 아직 코드가 제공되지 않은 컴포넌트예요. 개발 시 별도 구현이 필요해요.
- 🔴 빨간색 원: 디자인 커스텀이 허용되지 않는 컴포넌트예요.
- 🌈 무지개: 개발 문서가 없어서 별도로 코드를 작성해야 하는 컴포넌트예요.
3. 아이콘과 이미지 활용 방법
에셋과 이미지는 아래 방식으로 활용해 보세요.
- 제공된 아이콘을 검색해 다른 아이콘으로 교체할 수 있어요.
- 직접 제작한 아이콘을 컴포넌트로 만들어 교체할 수도 있어요. 이 경우 아이콘 가이드라인을 꼭 참고해 주세요.
- 빈 이미지를
Cmd + 클릭해서 원하는 이미지를 직접 업로드할 수도 있어요.
디자인할 때 꼭 지켜주세요
아래 항목들은 실제 개발과의 정합성을 맞추기 위해 특히 중요한 기준이에요.
- 모든 화면의 최상단에는 🔴 Mobile_Navigation 컴포넌트를 반드시 사용해 주세요. 필수 컴포넌트가 이미 포함된 🌈 Screen을 꺼내 쓰면 더 편리해요.
- 텍스트를 입력할 때는 피그마 기본 텍스트 대신 🔵 Mobile_Text 컴포넌트를 사용해 주세요. 자동으로 더 큰 텍스트 접근성을 지원하고, 폰트 크기와 행간을 일관되게 유지할 수 있어요.
- 가능한 한 오른쪽 패널에서만 속성을 조작해 주세요. 캔버스에서 직접 수정하면 코드에 없는 속성이 생겨 개발 시 구현이 어렵거나 시간이 오래 걸릴 수 있어요.
- 화면은 가로 375px 기준으로 작업해 주세요. 다른 크기도 가능하지만, 🔵 Mobile_Keypad처럼 반응형을 지원하지 않는 컴포넌트가 있어 불편할 수 있어요.
- 화면 상단에는 🔵 Mobile_Top, 그 아래에는 🔵 Mobile_ListRow를 사용하면 대부분의 화면을 빠르게 구성할 수 있어요.
- 대부분의 TDS 컴포넌트에는 기본 패딩이 포함돼 있어서 gap 없이 붙여서 사용해도 자연스럽게 보여요. 예를 들어 🔵 Mobile_ListRow에는 좁음, 일반, 넓음, 매우 넓음 네 가지 상하 패딩 옵션이 있어요. 그래도 간격 조절이 필요하다면 오토레이아웃의 gap을 사용하거나 🌈 Padding・Margin 컴포넌트를 활용해 주세요.
자주 묻는 질문
개발자 커뮤니티로 문의해 주세요. 빠르게 도와드릴게요.
대부분의 UI는 TDS 컴포넌트로 대체할 수 있어요. 예를 들어 Card UI 대신 🔵 Mobile_ListRow를 사용할 수 있어요.
그래도 필요한 컴포넌트가 없다면 채널톡으로 요청해 주세요. 가능한 빠르게 검토할게요.
직접 디자인할 수도 있지만, 다른 TDS 컴포넌트와 어울리게 만들어 주세요.
그래도 필요한 컴포넌트가 없다면 채널톡으로 요청해 주세요. 가능한 빠르게 검토할게요.
직접 디자인할 수도 있지만, 다른 TDS 컴포넌트와 어울리게 만들어 주세요.
각 컴포넌트에 이미 폰트가 적용돼 있어서 별도 설치 없이 사용할 수 있어요.
Missing Fonts로 보여도 실제 사용에는 문제가 없어요.
가능하지만 신중하게 판단해 주세요.
컴포넌트를 깨서 일부만 사용하면 개발 시 별도의 코드를 작성해야 해요.
가끔 발생하는 버그예요. 알맞은 색상으로 수정해서 사용해 주세요.
영어로 검색하거나 유니코드로 검색해 주세요.
피그마의 한계로 현재는 개선이 어려워요.
원칙적으로 가능하지만, 심사 과정에서 부적절하거나 사용성을 크게 해치는 경우에는 반려될 수 있어요.
다크 모드는 추후 지원할 예정이에요. 지금은 라이트 모드 기준으로만 디자인해 주세요.
개발자 커뮤니티로 언제든 문의해 주세요.