티스토리 뷰

디자인

iOS 개발자의 디자인공부 (1)

시르베어 2025. 2. 24. 22:23

최근 참가중인 부트캠프에서 첫번째 프로젝트를 진행했다. iOS 개발자 4명이서 진행했고 개발자 4명이서 했지만 기획, 디자인 등은 제대로(?) 이루어져야했다
이번 프로젝트를 하면서 느끼고 배운 것 중에는 개발자가 디자인(느낌, 색, 툴 사용법 등)을 알아두면 경쟁력이 생긴다는 사실도있었다. 그렇기에 조금씩은 알아두는게 좋을것 같아 공부하기로 했다.

프로젝트 앱의 디자인을 구성하면서 두 분이 8배수 여백, 컴포넌트 등을 언급해 주셨다. 처음엔 우리팀의 내부적인 룰로 인지를 했지만 알고보니 디자이너들이 8배수로 많이 작업하셨다고 하셨고 참고 자료1, 참고 자료2를 보내주셨다.

참고 자료1의 요약

  • 수치상 잘맞아 떨어지고 짝수가 수정과 기타 작업들을 하기에 적합하다.

참고 자료 2의 요약

  • 해상도 : 디스플레이의 선명한 정도, 픽셀의 개수
  • 8x8 해상도(64)는 4x4 해상도(16)보다 4배 더 선명
  • 8포인트 - 그리드 디자인 : 간격을 8배수로 맞추는 법
    • 0.75, 1.25, 1.5, 2, 3, 4배를 해도 깔끔하게 떨어짐
    • 디자인을 망가뜨리지 않고 축소할 수 있고 유연하게 대처가 가능
  • 디자인시스템
    • 반복적인 UI를 효율적으로 관리할 수 있고 팀 전체가 일관적으로 이해할 수 있음
    • UI 구조, 쓰는 방법, 유의해야하는 부분까지 상세하게 적혀 있는 문서
  • 파운데이션
    • 컴포넌트를 만들기 위해 사용하는 공통 재료
    • 색상, 글꼴, 아이콘, 레이아웃
  • 폰트 스타일(폰트 스케일)
    • 패밀리(Family), 굵기(무게감, Weight), 크기(Size), 행간(Line Height), 자간(Letter Spacing)
    • 일반적으로 16px부터 시작, 2px씩 줄이거나 늘림 / 20px 이상은 제목에 사용
    • 행각의 경우 제목은 120~135 %, 본문은 150%가 좋음

내용을 정말 간단하게 정리를 한 상태이고 더 자세한 내용이 있지만! 지금은 이 정도의 기초만 알아도 도움이 될듯하다. 더 필요한 내용이 생기면 이후로 점차 추가하면 좋을듯 하다

이건 개발자들끼리 머리 맞대고 짠 디자인 시스템

  • 폰트, 컬러셋, 공통으로 사용하는 버튼 등

마지막으로 서두에서 말한 프로젝트는 곧 회고와 함께 찾아올 예정입니다!!!

참고 자료 (이해하기 쉽고 정리 잘해주신 분들 최고입니다...)

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2026/01   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함