–
이제 많은 분들이 업무는 물론 다양한 영역에서 인공지능을 활용하고 있어요. 챗 GPT로 시작, 최근에는 국내에 최적화된 인공지능 서비스도 쉽게 찾아볼 수 있는데요. 오늘 소개할 서비스는 ‘인간의 언어를 이해하고 생성하도록 훈련된 인공지능’을 활용한 서비스를 기획, 디자인, 개발하는데 필요한 핵심 컴포넌트를 종류에 따라 제공해 주는 곳입니다.
반응형 대응은 물론, 다크 모드 적용이 가능한 조건으로 제공되는 컴포넌트의 수는 60여 개 이상이며 각각은 해상도에 따라 어떻게 적용되는지, 다크 모드와 라이트 모드일 때 어떻게 보이는지, 코드는 어떻게 구성되는지 등으로 확인할 수 있습니다. 컴포넌트는 전체를 하나의 리스트로 구성하는 것이 아니라 프롬프트 입력, 프롬프트 제안 등 상황에 따라 살펴볼 수 있도록 구성되어 있습니다.
위 이미지는 이곳에 등록된 전체 ‘컴포넌트’ 카테고리로 총 15개 구분으로 정리되어 있습니다. 컴포넌트에 해당하는 ‘이름’은 물론, 이를 대표하는 아이콘과 포함 개수가 함께 표기되어 있어 원하는 컴포넌트를 찾기 좋은 환경을 제공합니다.
상세 화면으로 이동하면 선택한 종류의 컴포넌트에 대한 보다 자세한 내용을 확인할 수 있습니다. 위 이미지는 ‘프롬프트 메시지 컴포넌트’로 입력한 내용에 따른 답변 내용을 확인할 수 있는 구성이며 각 답변에 대한 평가와 복사하기 버튼 등도 포함되어 있습니다. 기본 구성 외, 해상도에 따른 확인이 가능하며 미리 보기를 기본으로 코드 확인과 다크 모드일 때의 구성 역시 버튼 클릭 한 번으로 볼 수 있습니다.
이번에는 ‘프롬프트 입력’에 대한 컴포넌트를 확인해봤는데요. 기본 구성과 함께 앞서 살펴본 것과 같이 다양한 조건에 따른 정보와 구성 내용을 확인할 수 있습니다.
얼럿에 해당하는 컴포넌트도 이렇게 상황에 따라 확인할 수 있어요. 언어모델에 따른 서비스는 입력과 출력이 중요하고 그에 따른 부가 기능 역시 일반적인 서비스와 다를수밖에 없는데요. 이런 상황을 고려한 컴포넌트가 잘 정리되어 있어 참고하는데 많은 도움을 받을 수 있습니다. 컴포넌트에 대한 더 자세한 내용은 ‘링크’를 통해 확인해주세요.
- 디자인 시스템에 따른 버튼, 잇풋, 체크박스 등의 컴포넌트 탐색이 가능한 서비스
- 체크박스, 툴팁, 버튼 등 자주 쓰이는 UI 컴포넌트 구성 방법에 대한 자세한 내용을 확인할 수 있는 곳!
- 코딩 없이, 다양한 스타일의 컴포넌트를 맞춤형으로 활용할 수 있는 곳!
- 무료 피그마 컴포넌트를 카테고리에 따라 확인하고 복사할 수 있는 곳!
–
