디자인시스템에서 '컴포넌트'란?
등장인물 소개
� UX 디자이너: 김종귝님
� UI 디자이너: 송지호님
� 풀 스텍 개발자: 양둘찬님
컴포넌트 만들기 (1) - 일반 컴포넌트
이제 컴포넌트에 대해 알아볼게요. 스타일과 다르게 컴포넌트의 종류는 아주 많아요. UI KIT 제작사에 따라 그 종류와 명칭이 조금씩 다를 수 있어요. 하지만 하나의 정답이 있는 것은 아니에요. 그럼 컴포넌트를 하나 만들어볼게요.
송지호님은 상단의 네비게이션바에 있는 장바구니담기 아이콘을, 쇼핑카트모양으로 바꾸려던 중이에요.
● 라이브러리에 쇼핑카트 모양의 아이콘 컴포넌트가 있는지 한 번 검색해볼게요. 쇼핑카트 모양의 아이콘은 없는 것 같으니까 새로 만들어서 컴포넌트 파일에 추가해줄게요.
● 유아이 키트(UI KIT) 파일을 열고, Icon을 모아둔 부분이 어디에 있는지 찾아가줄게요. 검색해서 찾아가시면 돼요. 해당영역 근처에 쇼핑카트 아이콘을 추가해줄거에요.
● 카트는 피그마의 플러그인을 써서 다운받아볼게요. 플러그인도 종류가 많은데 본인 제품 디자인 컨셉과 잘 아울릴 것 같은 것으로 아무거나 사용해주시면 돼요.
● 플러그인을 열어서 Cart나 shopping 등등 관련 키워드로 검색을 해주세요.
● 마음에 드는 걸 찾았으면 클릭해서 다운받아주세요. 다운 받은 아이콘은 원하는 위치에 배치시켜 주시고 사이즈도 조절해주시고 이름도 적당한 이름으로 수정해주세요.
● 그리고 이걸 라이브러리에 올려야 되는데 라이브러리에 올라갈 수 있는 건 스타일이랑 컴포넌트만 가능해요. 그래서 얘를 컴포넌트로 변환해줄게요. 컴포넌트 만드는 방법은 해당 아이콘을 클릭하고, 상단에 있는 다이아몬드 모양의 아이콘을 클릭해 주시면 돼요.
● 이렇게 만든 컴포넌트를 라이브러리에 업데이트 해줄게요.
● 이제 제품 작업하던 디자인 파일로 돌아와서, 라이브러리에서 꺼내 쓰시면 돼요.
TIP. 그림자, Stroke 적용한 아이콘 내보내기할 때 주의할 점
디자이너 송지호님이 그림자가 있는 쇼핑 카트 아이콘을 만들었어요. 그리고 개발자 양둘찬님은 그 아이콘을 png로 다운받아서 피그마 inspect 패널에 표시된 대로 사이즈 및 위치를 지정해줬어요. 그런데 디자인 QA를 진행해보니 송지호님이 해당 아이콘 위치가 디자인 시안과 다르다고 하는거에요. 송지호님은 아이콘 영역을 기반으로 위치를 잡아줬고 양둘찬님은 그림자까지 포함된 아이콘을 기반으로 위치를 잡아줬기 때문에 이러한 차이가 생긴거에요. PNG가 아닌 SVG로 내보내기해도 마찬가지에요. 그림자까지 포함된 영역으로 내보내기가 돼요. 피그마에 Clip content, Include bounding box와 같은 설정 옵션이 있기는 하지만 그림자까지 포함된 채로 내보내지는 문제를 해결해주지는 못해요. 현재로써는 해결방법이 두가지에요.
첫번째 방법은, 송지호님이 아이콘 컴포넌트를 만들 때 해당 아이콘을 그림자까지 포함된 영역보다 더 큰 크기의 프레임으로 묶어주는 거에요. 그럼 그림자까지 포함된채로 내보내기 한다고 하더라도 피그마에서 보는 아이콘 사이즈와 양둘찬님이 받아본 사이즈가 동일하게 될테니까 위치가 어긋나는 문제는 생기지 않을거에요. 그런데 이 방법으로 아이콘을 내보내기 하면 그림자가 이미지화되어 내보내지게 돼요. 사용자가 다양한 환경의 기기에서 우리 제품을 열어볼 것을 고려하면, 그림자 값을 이미지가 아닌 코드로 적용해주는 것이 좋기는 해요.
또다른 방법은 송지호님이 아이콘 컴포넌트를 만들 때 두개의 레이어를 사용하는 거에요. 하나는 아이콘 레이어, 다른 하나는 그림자 레이어 이렇게요. 그러면 양둘찬님은 아이콘을 다운받을 때는 위에 있는 아이콘 레이어를 다운 받아 사용하면 되고 그림자 값은 확인할 때는 그 아래에 있는 레이어를 선택해서 확인하시면 돼요. 그런데 이 방법은 송지호님, 양둘찬님 모두에게 번거롭다는 것이 문제에요.
피그마는 기능 업데이트를 아주 자주하는 편이니까 조만간 이 문제에 대한 해결방법도 만들어주지 않을까 기대하고 있어요.
참고로, 송지호님이 아이콘 모양을 실제 크기보다 더 큰 사이즈의 프레임으로 묶어줄 때는 몇가지 사이즈 종류를 정해놓고 그 중 한 개의 사이즈로 만들어주시는 것이 좋아요. 예를 들어 작은 아이콘은 24픽셀로, 큰 아이콘은 40픽셀로 이렇게 두가지 종류를 딱 정해놓는거에요. (사이즈 종류를 이렇게 두개로 정하라는 것이 아니고 예시에요) 송지호님이 만든 아이콘들의 사이즈가 너무 다 제각각이면 이런 문제가 생길 수 있어요. 나중에 송지호님이 카트 모양 아이콘을 다시 쇼핑백 모양으로 변경했다고 가정해볼게요. 이 때 카트 아이콘과 쇼핑백 아이콘 사이즈가 다르다면 양둘찬님은 또 다시 위치값을 확인하고 수정을 해줘야 해요. 하지만 송지호님이 친절하게 작은 사이즈에 해당하는 아이콘들을 전부 가로세로 24 픽셀(px)의 프레임 안에 넣어둔다면 양둘찬님은 아이콘이 변경되더라도 그냥 아이콘 링크만 갈아끼우시면 돼요. 아이콘이 하나 더 추가되더라도 사이즈는 24픽셀로 동일하니까 사이즈를 체크해보지 않아도 되구요.
그리고 송지호님은 아이콘에 적용된 Stroke들을 깨주시는 것이 좋아요. Stroke가Center나 Outside로 설정되었다면 선이 바운딩박스(Boundingbox)를 넘어가게 되기 때문에 그림자를 적용했을 때와 동일한 문제가 생기거든요. 피그마에서 Strok 깨는 방법은 단축키는 키보드 Ctrl + Shift + O 를 동시에 누르시면 돼요.
그리고 사용자가 사용하는 기기에 따라 아이콘 크기가 자동 맞춤화될 때 Stroke의 두께까지도 같이 변하지는 않아서 디자인 시안과 다르게 보여질 수 있어요. (TIP 끝)
연구하고 공부하고 정리하는 것을 좋아해요. 그래서 UXUI 분야가 잘 맞다고 생각하면서 일하고 있어요.
공통 관심사를 갖고 있는 사람들과 이야기를 나누는 것은 재미있으면서 역량을 키우는데에도 큰 도움이 되고 있어서 제가 좋아라하는 공부 방식이에요. 그러니 UXUI와 관련된 것이라면 무엇이든 편하게 물어봐주세요! =)
https://open.kakao.com/o/sKYOZ7Dc
