디자이너가 알면 좋은 개발 지식

내가 까먹을까봐 적어놓는

웹 디자이너와 프로덕트 디자이너로 일하면서 개발자와 소통할 때 도움이 되었던 지식들을 공유합니다. 새로운 내용이 생길 때마다 이 글을 계속 업데이트 할게요.

---

용어

엘립시스:
한 줄 이상 넘어갈 때 ... 처리하는 것

스크린:
영역에 따라 스타일을 지정하는 것.(ex. 특정 영역에서만 폰트 색 변경)

오프캔버스:
창의 크기가 작아져서 더 이상 창 안에서 콘텐츠를 표현할 수 없을 때 창의 바깥쪽으로 내용을 숨기는 기법, 다른 패턴에 비해 구현이 복잡하다.

여백 비율을 정할때

분기점 넘어가기 전 최하 값에서 컨텐츠 양쪽 여백의 비율을 정해놔야 한다. (vw or %) 대략 랩탑이라고 할 수 있는 해상도 시작점을 기준으로 양쪽 여백 크게 잡아놓으면 대략 태블릿이라고 할 수 있는 해상도로 넘어가기 전에 양쪽 여백이 너무 넓어보일 수 있다.

기기 기준으로 생각하면 안된다.(반응형에서는 데탑, 랩탑, 태블릿, 모바일 나누는게 의미가 없다. 계속 해상도는 가변하니까)

분기점(break point) 자체는 2-3개 정도 나눈다.

360~767

768~1023

1024~1920

1920~

폰트 사이즈는 크게 px, rem, vw로 사용한다.

px과 rem은 기능은 똑같지만 계산하는 방식에 차이가 있다. 둘 다 분기점에 따라 사이즈를 지정할 수는 있다.(ex.1rem = 10px)

https://viita-watches.com/ 분기점에 따라 폰트 크기가 툭툭 바뀐다면 px이나 rem 단위를 사용해서 해상도별 사이즈를 별도로 지정해준 것이다.

vw는 해상도에 따라 퍼센테이지로 크기가 변하는 방식이다. 하나의 문장에 vw와 rem방식을 동시에 사용할 수 있다. 결론적으로 아주 큰 타이틀에는 vw, 작은 본문에는 rem이 적합하다.

https://mac-pam.netlify.app/ 해상도가 가변할 때 부드럽게 크기가 변하고 있는 것은 vw나 vh 단위를 사용한 것이다.

컴포넌트 디자인은 위아래 여백을 동일하게 설정하면 개발자가 보기 편하다

예를 들어 Tab 컴포넌트를 제작할 때 상하단 여백을 동일하게 설정한다.

---

잘못된 내용을 댓글로 달아주시면 바로 정정하겠습니다.