■ 소개
.
목표: 419 (4업으로 1달러 벌기 시작해서 9달러까지 벌어보기)
.
오늘 고대하던 오프모임 다녀왔습니다.
방학기간에 도파민이 부족했는데, 도파민이 뿜뿜되었습니다.
(+) 애정하는 뇌과학 스터디 소속감에서 오는 세로토닌? 도 뿜뿜했습니다 ㅎㅎ
.
1차 마치구 집에 돌아와서 잊어버리기 전에 얼른 업데이트 해두고 애 재우러 가려고 합니다.
.
인상깊은게 많았지만, 특히 기억남는 것은
1) 성준님 : 도파민, 세로토닌 접근법
2) JUN님 : 타겟층과 정말 하고 싶은 것에 대한 고민 필요성
3) 쏭님 : Vooster 통한 디자인 구성법
4) 딸깍몬님 : 앱인토스 TDS 필요성 & 사업자등록 필요성
입니다.
.
특특히, 딸깍몬님 이야기를 듣고 나니 더 진행하기 전에 애초에 토스 TDS기반으로
새로 만들 필요성을 느꼈습니다.
역쉬 오프모임 가면 얻어오는게 많습니다.
.
■ 진행 및 결과
방학기간에 인앱토스 특강 들으면서 가입은 해뒀습니다.
그래서 얼른 들어가서 TDS를 찾았습니다.
제가 기술이 없지만, JUN님의 조언대로 TDS 파일을 피그마에 집어 넣어 새로 초벌구이를 해보려고 했습니다.
https://developers-apps-in-toss.toss.im/design/prepare/design.html
.
그런데 알고보니 피그마 권한을 먼저 신청해야 피그마에서 TDS 라이브러리를 사용할 수 있네요.
---
url: 'https://developers-apps-in-toss.toss.im/design/prepare/design.md'
description: '피그마를 이용한 앱인토스 미니앱 디자인 가이드입니다. TDS 컴포넌트 라이브러리, 에셋 활용, 색상 적용, 반응형 디자인 방법을 확인하세요.'
---
# 피그마
제공된 라이브러리에 있는 TDS 컴포넌트로 디자인하는 것을 추천해요.\
UI 스타일 개발에 신경쓰지 않고 개발 문서에 있는 코드를 토대로 빠르게 개발할 수 있어요.
***
## **1. 피그마 권한을 먼저 신청해 주세요**
[**채널톡**](https://apps-in-toss.channel.io/workflows/748915)으로 피그마 권한을 신청하면, 초대받은 프로젝트에서 TDS 라이브러리를 사용할 수 있어요.\
피그마 좌측의 Recents 메뉴에서 해당 프로젝트에 들어갈 수 있어요.
## 2. TDS 컴포넌트를 검색해서 사용할 수 있어요
* **TDS Components for ApssInToss :** 각종 컴포넌트가 있는 라이브러리
* **TDS Foundation for AppsInToss :** 폰트, 컬러, 아이콘 라이브러리
단축키 `option + 2` 혹은 왼쪽 Assets 패널에서 원하는 컴포넌트를 찾아보세요.
* 🔵 파란색 원: 개발 문서에서 코드가 제공되는 TDS 컴포넌트예요.
* 🟣 보라색 원: 피그마에서 사용할 수 있지만, 아직 코드가 제공되지 않는 TDS 컴포넌트예요. 별도로 코드를 작성해야 해요.
* 🔴 빨간색 원: 디자인 커스텀을 할 수 없는 TDS 컴포넌트예요.
* 🌈 무지개: 개발 문서가 없어 별도로 코드를 작성해야 해요.
## **3. 에셋, 이미지는 이렇게 활용해 보세요**
1. 제공된 아이콘을 검색해 다른 아이콘으로 교체할 수 있어요.
2. 직접 제작한 아이콘을 컴포넌트로 만들어 교체할 수도 있어요.
* 직접 제작하려면 [**아이콘 가이드라인**](https://www.notion.so/21b714bbfde780fb84bac2acfbb4a6b9?pvs=21)을 참고해 주세요.
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** 컴포넌트를 사용해보세요. 프리셋으로 되어 있는 마진값을 사용할 수 있어요.
\<FaqAccordion :items='\[
{
q: "컴포넌트가 원하는 대로 동작하지 않아요.",
a: `<p> <a href="https://techchat-apps-in-toss.toss.im/">개발자 커뮤니티</a>로 문의해 주세요. 빠르게 해결해 드릴게요.</p>`
},
{
q: "원하는 컴포넌트가 없어요.",
a: \`
.
우선 얼른 신청했습니다.
.
한국어 텍스트가 있는 페이지의 스크린샷
.
1~2일 걸린다니까 그 사이에는
쏭님의 조언대로 Vooster를 테스트해보고,
성준님의 뇌과학 적용방법을 고민해봐야겠습니다.
.
JUN님의 방향설정을 위한 질문이 큰 도움이 되는 것 같습니다.
(늘 큰 방향을 잘 잡아주셔서 감사감사!)
.
라이브러리를 쓰려면 왠지 피그마 유료 결제를 해야할 것 같기도합니다 ㅎ
.
■ 느낀점 및 향후 계획
앱인토스로 419 프로젝트 현실화하기를 위해서 달려보려고 합니다.
당장 TDS 적용시켜서 하고 싶은 마음을 눌러야겠어요. (들뜨지 말자)
성준님 조언대로 Y/N만으로 하는 것이랑, 쏭님 조언대로 Vooster 활용한 디자인 계획 등을 해봐야겠습니다.
.
생각해보면 지난 스터디에는 뇌를 잘 안쓴 것 같아요.
ESG나 토스증권 연계 같은 아이템 들은 AI한테 묻는다고 튀어나오는게 아닌 것 같습니다 ㅎㅎ
AI시대가 될 수록 사람이 만들어내는 컨텐츠는 더 귀할 것 같다는 생각입니다.
.
■ 부록 : 눈오지님이랑 대화
BTS급 스케쥴을 소화하고 샌프란에서 돌아오신 눈오지님과도 이야기를 해서 너무나 반가웠습니다.
본인 도메인 + ALPHA만 해도 먹고 살 수 있으나,
그 문이 점점 빠른 속도로 닫히고 있다는 말에
마음이 사알짝 조급해졌습니다..
.
오늘 밤에 쓰레드 계정이라도 당장 시작해보려고 합니다.
.
.
(아 진짜 이 뇌 팽팽돌아가는 느낌 때문에 지피터스를 못끊습니다 ㅎㅎ)
