UXUI/TIL45 [TIL] 0716 1. 오늘 학습 키워드컬러 스타일, 폰트 스타일컴포넌트, 인스턴스디자인 시스템버튼·텍스트 필드·컨트롤 컴포넌트 2. 오늘 학습한 내용을 나만의 언어로 정리하기 폰트 스타일패밀리, 굵기, 크기, 행간, 자간 5가지적당한 행간 값은 가독성에 큰 영향을 미침행간이 너무 짧으면? 시선을 이동할 때 다음 줄을 찾기 어렵다. 또한 위아래 붙은 줄들이 계속 시야에 같이 들어와 읽는 걸 방해한다.행간이 너무 넓으면? 시선을 이동하면서 다음 줄을 놓친다. 또한 전체적인 문단이 벌어져 보여서 레이아웃을 해치기도 한다. 폰트 자체가 가진 기본적인 여백이 있기 때문에 서체마다 행간을 확인해야 한다. 일반적으로 통용되는 값: 제목과 같은 큰 폰트 ▶️ 120~135%, 본문▶️ 135~170% 사이 컴포넌트구성품이라는 뜻이며.. 2025. 7. 16. [TIL] 0715 1. 오늘 학습 키워드프레임오토레이아웃컨테이너컨스트레인트리사이징포지션 2. 오늘 학습한 내용을 나만의 언어로 정리하기 오토레이아웃레이아웃을 자동으로 조정하는 기능개체를 패딩(내부 여백)으로 감싸 컨테이너로 만듦간격에 맞게 컨테이너(개체 + 패딩)를 쌓을 수 있게 함아래로 쌓이는 형태 컨스트레인트제약 또는 조건의 의미오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한한다는 뜻부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할지 정할 수 있음각각 Top, Right, Bottom, Left 방향에 고정 시킬 수 있음scale: 프레임의 사이즈에 따라 오브젝트의 비율 & 사이즈가 결정됨 리사이징프레임을 오토레이아웃으로 감싸기 ▶️ 다른 사이즈 값이 생김부모 개체의 길이나 크기에 따라 자식.. 2025. 7. 15. [TIL] 0714 1. 오늘 학습 키워드 UX/UI, HCI, CX, BXUX/UI 디자이너 역할과 업무디자인 가이드라인 2. 오늘 학습 한 내용을 나만의 언어로 정리하기 UX/UI UX(User Experience) 사용자가 제품/서비스를 이용하면서 느끼는 전체적인 경험UI(User Interface) 사용자가 제품을 사용할 때 보게되는 시각적인 요소레이아웃, 버튼, 아이콘, 이미지 함께 알아두면 좋은 용어 HCI(Human Computer Interaction): 사람과 컴퓨터의 상호작용 연구 CX(Customer Experience): 브랜드와 처음 만나는 순간부터의 전체 고객 여정에서의 인상 BX(Brand Experience): 브랜드를 떠올렸을 때 느껴지는 이미지/감정 디자이너의 역할UI 디자이너: 구성과 미.. 2025. 7. 14. [TIL] 0709 1. 오늘 학습 키워드 - 합성 컴포넌트, 네스티드 인스턴스, 탭 컴포넌트 2. 오늘 학습 한 내용을 나만의 언어로 정리하기 합성 컴포넌트컴포넌트를 재료로 사용해 만든 컴포넌트예: 바텀시트, 다이얼로그, 카드, 탭 등 네스티드 인스턴스상위 컴포넌트에서 하위 컴포넌트의 속성 조작이 가능하게 하는 기능 컴포넌트 합치기 & 분리하기새로운 컴포넌트는 드래그해서 세트에 추가 가능분리할 때는 컴포넌트를 밖으로 끌어내리면 됨꺼낸 컴포넌트는 하위 폴더 구조 이름으로 바뀜 강의 정리 내용 아이콘들이 개별적으로 컴포넌트로 만들어야 한다. --> 컴포넌트 옵션을 선택하고 " data-og-host="azure326.tistory.com" data-og-source-url="https://azure326.tistory.com.. 2025. 7. 9. [TIL] 0708 1. 오늘 학습 키워드 - 컴포넌트 프로퍼티- 컨트롤 컴포넌트(체크박스, 라디오)- UI의 기능 주의적 관점 2. 오늘 학습 한 내용을 나만의 언어로 정리하기 컴포넌트 프로퍼티피그마에서 인스턴스를 재사용할 때 효율성을 높이기 위해 사용컴포넌트의 일부를 조건에 따라 바꾸는 기능 프로퍼티 종류Boolean, Instance swap, Text 버튼 위계위계 용어: Hierarchy = 계층, Priority = 우선순위일반적인 버튼 위계 종류: Primary, Secondary, Tertiary 강의 정리 내용 [피그마 강의] 4주차: 컴포넌트 프로퍼티, 버튼 컴포넌트 이해하기피그마 강의] 4주차: 컴포넌트4-2) 컴포넌트 프로퍼티의 이해 · 의사상태 복습: (예시) 버튼에 마우스를 호버했을 때, 색깔이 바.. 2025. 7. 8. [TIL] 0707 1. 오늘 학습 키워드 - 버튼 컴포넌트- 컨트롤 컴포넌트(체크박스, 라디오)- UI의 기능 주의적 관점 2. 오늘 학습 한 내용을 나만의 언어로 정리하기 버튼 컴포넌트: 사용자 액션을 유도하는 UI 요소 컨트롤 컴포넌트: 사용자의 선택을 돕는 컴포넌트종류: 체크박스, 라디오, 스위치(토글), 슬라이더 UI 학습 관점: 생김새가 아닌 ‘무엇을 하는가’ 에 집중해야 한다! 강의 정리 내용 [피그마 강의] 3주차: UI 만들기 실습3-8) UI 만들기 실습(1) 버튼 컴포넌트· 버튼 컴포넌트 참고는 노션 참고하기(머터리얼 디자인, 우버 디자인 시스템, 라이트닝 디자인 시스템, 카본 디자인 시스템, ... )· 버튼 컴포넌트는 액션에azure326.tistory.com 3. 학습하며 겪었던 문제점 & 에러.. 2025. 7. 7. 이전 1 ··· 4 5 6 7 8 다음
