🔥 목차 🔥

1. UI
2. UX
3. 둘의 관계
4. 그리드 시스템

🧐 그렇다면 꼬! 🧐

💡 UI(User Interface)

• 사람들이 컴퓨터와 상호작용하는 시스템을 말함
• 그래픽적인 요소 외에도 클라이언트가 클릭했을때나,입력,하드웨어의 이벤트가 발생 했을때 컴퓨터와 상호작용 하기 위한 시스템이라고 볼 수 있음
• UI는 사용자의 만족도와 연관이 되는 부분이기 때문에 굉장이 중요한 역활을 하게 되었음

💡 UX(User Experience)

• 뜻에서 알수 있듯이 사용자의 경험을 의미함
• UX에 가장 많은 영향을 주는 요소중 하나가 UI임
• 프론트앤드 개발자로써는 UI를 신경쓰는 이유는 UX측면을 고려한 부분도 있음
• 좋은 UX를 가지려 노력 해야되는건 당연한거고 최소한 클라이언트가 나쁜 경험을 하지않게 즉 UX가 좋지 않게는 하지 않도록 해야함

💡 둘의 관계

• 위에 설명했지만 UX는 UI를 품고있음 좋은 UX가 좋은 UI를 의미하거나 좋은 UI가 항상 좋은 UX를 보장하진 않음
• 서로 다르지만 떼려야 뗄 수 없는 관계고 서로를 보완하는 역활을 함
• UX가 좋지 않은곳을 찾아내서 UI의 개선점을 찾을 수도 있고, UI를 개선해서 UX적 측면에서 좋아지기도 함
  • 서로가 서로를 보안하고 발전하는 시스템임

💡 그리드 시스템 ( Grid System )

• 화면을 격자로 나눈다음 격자에 맞춰 콘텐츠를 배치하는 방법
• 컬럼 그리드 시스템을 사용해서 Margin,Column,Gutter라는 세가지 요소로 구성됨
• Margin
  • 양쪽의 여백을 의미함
  • 너비를 px같은 절대 단위로 사용해서 고정값으로 사용하거나 vw, %같은 상대 단위를 사용해서 유동성을 줘도 됨
• Column
  • 콘텐츠가 위치하게 될 세로로 나누어진 영역
  • 표준적으로 휴대폰은 4개 태블릿 8개 PC 12개로 나뉨
• Gutter
  • Column 사이의 공간이고 컨텐츠를 구분하는데 도움을 줌
  • 간격이 좁을수록 컨텐츠들이 연관성 있어보이고 넓을수록 독립적이게 보임
  • Gutter는 아무리 넓어도 컬럼 넓이보단 작게 설정해야함