Appearance

피그마 ​

제공된 라이브러리에 있는 TDS 컴포넌트로 디자인하는 것을 추천해요.
UI 스타일 개발에 신경쓰지 않고 개발 문서에 있는 코드를 토대로 빠르게 개발할 수 있어요.

1. 피그마 권한을 먼저 신청해 주세요 ​

채널톡으로 피그마 권한을 신청하면, 초대받은 프로젝트에서 TDS 라이브러리를 사용할 수 있어요.
피그마 좌측의 Recents 메뉴에서 해당 프로젝트에 들어갈 수 있어요.


2. TDS 컴포넌트를 검색해서 사용할 수 있어요 ​

  • TDS Components for ApssInToss : 각종 컴포넌트가 있는 라이브러리
  • TDS Foundation for AppsInToss : 폰트, 컬러, 아이콘 라이브러리

단축키 option + 2 혹은 왼쪽 Assets 패널에서 원하는 컴포넌트를 찾아보세요.

  • 🔵 파란색 원: 개발 문서에서 코드가 제공되는 TDS 컴포넌트예요.
  • 🟣 보라색 원: 피그마에서 사용할 수 있지만, 아직 코드가 제공되지 않는 TDS 컴포넌트예요. 별도로 코드를 작성해야 해요.
  • 🔴 빨간색 원: 디자인 커스텀을 할 수 없는 TDS 컴포넌트예요.
  • 🌈 무지개: 개발 문서가 없어 별도로 코드를 작성해야 해요.

3. 에셋, 이미지는 이렇게 활용해 보세요 ​

  1. 제공된 아이콘을 검색해 다른 아이콘으로 교체할 수 있어요.
  2. 직접 제작한 아이콘을 컴포넌트로 만들어 교체할 수도 있어요.
  3. 빈 이미지를 Cmd + 클릭하고 원하는 이미지를 직접 업로드할 수도 있어요.


참고해 주세요 ​

  1. 모든 화면 최상단엔 🔴 Mobile_Navigation 컴포넌트를 놓아야 해요. 필수 컴포넌트가 이미 포함된 🌈 Screen을 꺼내서 사용하면 편리해요.

  2. 화면에 텍스트만 입력하고 싶을 때는 피그마의 텍스트 대신 🔵 Mobile_Text 컴포넌트를 사용해주세요. 자동으로 모든 플랫폼에서 더큰텍스트 대응이 돼요. 또한 일관된 크기감의 폰트 사이즈를 사용할 수 있고, 자간이나 행간을 신경쓰지 않아도 돼요.

  3. 가능한 우측 패널에서만 속성을 조작해주세요. 만약 캔버스에서 컴포넌트를 직접 조작한다면 코드에 없는 속성이 추가돼 개발 과정에서 똑같이 구현하기 어렵거나 오래 걸릴 수 있어요.

  4. 가능하면 가로 375px 화면으로 작업해주세요. 다른 사이즈도 쓸 수 있지만, 🔵 Mobile_Keypad 같이 반응형으로 대응되지 않는 일부 컴포넌트가 있어서 불편할 수 있어요.

  5. 화면 가장 상단에는 🔵 Mobile_Top 컴포넌트를, 그 아래엔 🔵 Mobile_ListRow 컴포넌트를 사용하면 대부분의 화면을 쉽게 만들 수 있어요.

  6. 대부분의 TDS 컴포넌트엔 좌우상하 패딩이 포함되어 있어서 gap 없이 다 붙여서 쓸 수 있도록 만들어졌어요. 예를 들어 🔵 Mobile_ListRow 에는 좁음, 일반, 넓음, 매우넓음 4가지의 상하 패딩 옵션이 내장되어 있어요. 다른 일부 컴포넌트들도 마찬가지예요.

    그래도 만약 사이를 띄워야 한다면 오토레이아웃의 gap을 사용하거나 🌈 Padding・Margin 컴포넌트를 사용해보세요. 프리셋으로 되어 있는 마진값을 사용할 수 있어요.

개발자 커뮤니티로 문의해 주세요. 빠르게 해결해 드릴게요.

  1. TDS로 대부분의 UI를 대체 가능해요. 예를 들어 Card UI 대신 🔵 Mobile_ListRow를 사용할 수 있어요.
    그럼에도 없는 컴포넌트는 채널톡으로 요청 주시면 빠르게 반영해 드릴게요. (예: 지도 등)
  2. 원하는 UI를 직접 디자인해서 사용할 수 있지만, 다른 TDS 컴포넌트와 어울리게 디자인해 주세요.
  3. 화면 구성이나 디자인에 고민이 있다면 채널톡으로 언제든 문의 주세요.

각 컴포넌트에 이미 폰트가 적용 되어 있으므로 따로 폰트 설치 없이 사용이 가능해요

간혹 Missing Fonts 로 노출이 되더라도 문제 없이 사용이 가능해요.

가능하지만 효율적인지 판단 후 결정해 주세요. 임의로 분리해 일부만 쓰거나 수정하면 코드를 별도로 작성해야 하기 때문이에요.

참고로 토스는 초기 제품을 TDS로 빠르게 만들어 검증하는 것을 추구해요.

가끔 발생하는 버그지만, 알맞은 컬러로 변경해 사용하셔도 괜찮아요.

그럴 땐 영어로 검색하거나, 아이콘은 유니코드로 검색해 주세요.

피그마의 문제이지만 당장 해결하긴 어렵다고 해요.

네. 다만 심사 과정에서 부적절하거나 사용성을 심하게 저해하는 경우에 반려될 수 있어요.

다크 모드는 추후 지원할 예정이에요. 지금은 라이트모드 기준으로만 디자인해 주세요.

개발자 커뮤니티로 문의 주세요.