[8/100] table
8번째는 table(이하 테이블)입니다. 데이터 시트 형태의 인터페이스인데, 데이터 시트와는 조금 다르게 간단한 기능을 수행하는 부분도 있습니다. 단순하게 정보를 나열만 한다면 굉장히 간단한 형태의 인터페이스지만, 서비스의 성격에 따라 보여주는 정보 및 제공하는 기능이 다양하기 때문에 설계 및 구현 난이도가 높아지는 성격이 있습니다. 테이블에는 크게 헤더와 컨텐츠가 있는데, 헤더는 테이블 상단에 위치해서 보이는 콘텐츠의 제목을 표시하는 기능을 합니다. 경우에 따라서는 생략되는데, 이유로는 콘텐츠의 정보가 간단해서 파악하는데 굳이 추가적인 명시를 하지 않아도 되는 경우입니다. 콘텐츠의 형태는 다양하며, 위의 예제에는 체크박스, 아바타, 텍스트, 드롭다운, 칩(혹은 배지), 버튼 등이 있습니다. 물론 훨씬 ..
2022. 9. 23.
[5/100] button
5번째는 버튼입니다. 디자인 시스템을 구축하다 보면 가장 기본적이면서도 복잡하다면 복잡한 컴포넌트인데요. 프로덕트를 디자인하다 보면 앱, 웹을 모두 같이 하는 경우가 있습니다. 그럼 아무래도 앱, 웹의 사용자 인터페이스의 환경이 조금은 다르다 보니, 마우스를 사용하는 환경, 단순히 탭을 하는 환경, 이렇게 다르다 보니 버튼도 상태 혹은 이벤트에 대해 신경을 써야 하지만 간단하게 처리하자면, 앱에서는 mouse-hover 상태만 없다고 생각하면 편합니다. 그리고 버튼은 보통 스타일이 있는데, 주로 많이 사용되는 스타일은 위의 3가지가 있습니다. 부르는 명칭이 좀 제각각인 경우가 많아서 저같은 경우에는 왼쪽부터, primary, secondary, ghost라고 부르고 있습니다. primary가 가장 많이 ..
2022. 9. 14.
