사전캠프10 [내일배움캠프] 사전캠프 Day 10 - Material Design 구성 요소 사용자 인터페이스를 만드는 데 사용되는 상호 작용적인 빌딩 블록목적에 따라 액션, 컨테인먼트, 커뮤니케이션, 탐색, 선택 및 텍스트 입력과 같은 범주로 구성 버튼 만들기플로팅 액션 버튼 (FAB)- 화면 맨 앞에 고정되어 떠 있는 버튼- 일반적으로 가장자리에 위치하며 상위 레벨의 중요도를 가졌으므로 신중하게 사용해야 한다.- 비즈니스 목적에 따라 사용자에게 특정 기능으로 액션을 유도 : 웹사이트 메인페이지 챗봇 버튼- 사용자 편의에 따라 사용량이 많은 핵심 기능을 강조 : 쇼핑 웹사이트 상품페이지 : 탑/다운 버튼- 잘 보여야 하지만 컨텐츠를 보는 데 방해가 되지 않는 크기가 좋다. 확장 FAB- 아이콘 & 텍스트 : 호버 시에 텍스트가 나타나거나 스크롤 다운 시 텍스트가 사라진다- 버튼 리.. 2025. 1. 17. [내일배움캠프] 사전캠프 Day 9 - 피그마 기초강의 5주차 5주차 수업 목표화면 단위의 디자인을 수행하며 필요한 UI를 설계할 수 있다프로토타입의 개념을 이해하고 피그마에서 프로토타이핑을 사용할 수 있다1배수 사이즈 - 피그마에서 디자인을 하기 위한 기준 사이즈히어로 섹션 - 메인 화면의 가장 상단 영역앱 바 = 네이게이션 바 프로토타입 = 시제품- 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것- 프로토타입을 만들거나 사용해서 테스트하는 것을 프로토타이핑이라고 함- 실제 제품을 만들지 않고 아이디어를 검증해 볼 수 있다- 팀원들과 시각적인 결과물로 소통할 수 있다- 부족하거나 놓친 부분을 확인할 수 있다 오버플로우- 프레임 밖으로 컨텐츠가 넘어가는 것- 스크롤 사용 가능 스마트 애니메이트- 움직일 요소의 이름이 같아야한다- 레이어 구조가 동일해야한다.. 2025. 1. 16. [내일배움캠프] 사전캠프 Day 7 - 피그마 기초강의 3주차 3주차 강의의 수업 목표UI 디자인 환경을 이해하고 적합한 디자인 원칙을 수립할 수 있다피그마에서 스타일을 생성하고 관리할 수 있다컴포넌트의 개념을 이해하고 기능 및 형태에 따라 분류할 수 있다 파운데이션이란- UI를 구성하는 가장 작은 알갱이이자 기초재료- 필수 구성 요소 = 색상, 폰트 ✔️ 파운데이션의 구성색상(Color)서체(Font, Typography)간격, 여백(Spacing, Gap)곡률(Radius)그리드(Grid)고도(Elevation) = 높이아이콘(Icon)💡 컬러 스타일- 디자인에서 사용할 색상을 모아두는 팔레트① 포인트 컬러 (프라이머리 컬러 또는 엑센트 컬러)- 중요하고 핵심적인 부분에만 사용하는 색상② 백그라운드 컬러- 전체적인 분위기를 만들어 줄 배경색 (일반적으로 흰색을.. 2025. 1. 14. [내일배움캠프] 사전캠프 Day 6 - 피그마 기초강의 2주차 [수업 목표]프레임과 그룹의 차이를 이해하고 사용할 수 있다오토레이아웃의 원리를 이해하고 사용할 수 있다컨스트레인트와 리사이징의 개념을 이해하고 사용할 수 있다💡프레임(Frame)피그마에서 코드 블록을 만드는 기능, 실제 화면으로 인식하는 개체- 프레임은 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어짐- 프레임은 다른 개체나 프레임을 넣을 수 있기 때문에 컨테이너(Container)라고도 부름 💡그룹(Group)여러 개체를 하나로 묶어주는 기능- 여러 개체를 조정하거나 디자인을 정리하는 등 편의를 위해 여러 개체를 하나로 담는 기능- 코드 블록으로 인식되지 않음 📌프레임은 개발에 필요한 속성들을 적용할 수 있고, 그룹은 속성을 적용할 수 없음 - 프레임은 하나로 묶인 각각의 개체로 인.. 2025. 1. 13. [내일배움캠프] 사전캠프 Day 5 - UXUI 아티클 / 책 스터디 오늘은 UXUI 관련 아티클을 읽고 내 생각을 정리해보려 한다우선 UXUI 초짜로서 아는 것이 없기 때문에 보자마자 확 끌리는 아티클로 골라보았다.내가 고른 아티클은 관심있었던 여행 관련 서비스에 대해 작성된 글이고, 그 중에서도 자주 사용했었던 아고다라는 어플에 관한 글이어서 골라보았다. “우려가 결국 현실로?” UI·UX 디자인 관점으로 본 아고다의 다크패턴 논란방통위는 왜 아고다에 칼을 빼들었을까? 아티클을 제대로 이해하고 넘어가려면 우선 다크패턴이란 무엇인가를 알아야 할 것 같다. 💡다크패턴이란?2010년 영국의 UX 디자이너 해리 브리그널이 ‘소비자를 기만하거나 속이는 유형의 디자인’을 모아 정립한 UI·UX 디자인이다. 당시 그는 다크패턴에 대해 ‘사용자를 속여서 행동을 유도하기 위해 세.. 2025. 1. 10. [내일배움캠프] 사전캠프 Day4 - Odd-inary 우리는 왜 이 작업을 하나요? 사전캠프 팀원들과 함께 팀 프로젝트를 같은 방향으로 이끌기 위해 작업합니다.우리가 만들어야 할 것은 무엇인가요?- 팀 로고, 컬러팔레트, 슬로건우리는 어떻게 이 일을 완성해야하나요?협업 방식- 아이디어 회의 - 피드백 및 선정 - 디자인 툴 활용 - 참고자료 공유작업 과정- 팀 이름에 대한 각자의 아이디어를 여러가지 공유하고 회의를 통해 선정- 팀 이름을 토대로 슬로건 아이디어 공유 후 선정- 팀원들이 선호하는 색상 선정- 팀원 각자가 컬러팔레트와 팀명, 슬로건을 토대로 로고를 제작 후 공유- 회의 후 결정된 아이디어 취합- 최종 결정된 아이디어를 토대로 로고 제작팀원 모두가 위 과정과 결과에 대해 TIL을 작성한 후, TIL을 제출해주세요.- 팀명 : Odd-inary- .. 2025. 1. 9. 이전 1 2 다음 728x90 반응형 LIST
