Ant Design이란?
Ant Design은 알리바바 그룹에서 개발한 UI 프레임워크 이다.
현실적인 UX 디자인으로 Button, Grid, Layout, Form 다양한 컴포넌트를 지원하고 있다.
아래 링크는 Ant Design의 디자인 패턴과 원리를 설명하는 페이지 이다.
Ant Design 장 단점
장점
1. 3분 만에 레이아웃 잡기
지금 토이프로젝트가 디자인 없이 바로 퍼블리싱으로 넘어가는 단계이기 때문에 col과 row에 대해 조금 신경이 많이 쓰였다. 다행스럽게도 앤트디자인 컴포넌트 페이지를 가보면 레이아웃과 그리드 컴포넌트를 제공한다. 아래 링크를 참조하시면 좋을 것 같다.
Ant Design - Components(grid)
- https://ant.design/components/grid
Ant Design - Components(layout) - https://ant.design/components/layout
사용해보고 나서 header나 footer에 일일이 margin, padding 값을 넣을 필요가 없다. 그리고 내가 해보고 싶은 그리드를 쉽게 적용할 수 있다는 게 가장 큰 장점인 것 같다. 이 그리드가 마음에 안 들면 숫자만 간단히 바꿀 수 있다.
2. 직관적이고 깔끔한 UX 컴포넌트 지원
앤트디자인의 컴포넌트가 대체로 심플한 디자인을 가지고 있다.
만약에 제가 지금 사용하고 있는 프레임워크가 없다면
input에 대한 컴포넌트를 만들 때
focus 상태일 때 아웃라인 빼기 코드 한 줄,
input 안에 아이콘 이미지 넣기 코드 한 줄 등등..
번거로운 작업을 줄일 수 있다는 점이 가장 좋은 장점인 것 같다.
input뿐만 아니라 다양한 컴포넌트들도 지원한다.
Ant Design - Components(input)
단점
1.쉽게 프레임워크를 가져오다 보니 웹 표준에 대한 착각
제가 header, footer, section 등등... 늘 배웠던 시맨틱 태그들이 있는데 버튼을 쉽게 만들고 import와 router를 작동시키니깐 순간 "문제없네?" 큰 착각에 빠지게 되는 것 같다.
데이터를 받아올 때 input의 부모 요소로 form 태그를 써줘야 하는데 앤트디자인을 통해서 화면에서 이쁘게 구현이 되다 보니 저도 모르게 놓치는 부분들이 있는 것 같다.
2.나도 모르는 ant design 초기설정
출처가 불확실한 margin 값 때문에 header에서 중심으로 안 보이는 현상이 생겼다.
ant design의 css 초기설정 때문에 margin 값을 설정되었다.
구글 개발자도구 차근차근 찾다 보면 소스의 근원지가 보였다. 팀원분들께 감사하다.
그리고 앤트디자인에서 'global.less' css 초기설정을 리셋시켜주는 코드도 제공한다.
Ant Design - global.less
앤트디자인의 global.less를 사용하면 코드가 꼬일까 봐 일단은 사용하지 않는 쪽으로 포커스를 맞췄다.
