WIL(Weekly I learned) 이번 주 경험한 모든 일 1. 팀 프로젝트 발제/진행 - 분위기도 사람도 너무 좋은 팀원들과 함께 프로젝트를 진행했고 앱선정부터 삐그덕 거림 하나 없이 서로의 의견도 잘 듣고 이야기를 하는 부분에 행복하고 편하게 작업할 수 있었다. - 페르소나 설정에 제일 어려움을 느꼈다. 뭔가 내가 경험하지 않은 것에 대한 어려움이라고 할까? 어떠한 상황, 사용자의 성격, 행동을 상상하며 가상의 내용으로 설정하는 것 자체가 너무 어려운데 우리 팀원들은 진짜 뚝딱뚝딱 작성하는 것을 보고 너무 신기했다. 한 분은 극 N에 해당한다며 상황 시나리오를 거의 드라마 대본처럼 쓰는 것을 보고 감탄했었던 기억이 있다. 이번 주 아쉬웠던 점 / 깨달은 점 / 나의 감정 - 아쉬웠던 점 : 분석..

WIL(Weekly I learned) 이번 주 경험한 모든 일 팀 편성 또 새로운 팀이 생성되었다. 하루이틀만에 잘 맞을 것 같은 느낌이 들었고 편하게 이야기도 하고 유튜브 광고때문에 음악을 듣기 힘들다고 했더니 직접 음악방송까지 열어주셔서 너무 좋았다. 팀 아티클 스터디 진행 이번 팀에서도 아티클 스터디를 진행했는데 팀마다 분위기도 다르고 하는 방법도 달라서 너무 신기하고 재밌었다. 개인 프로젝트 과제 조금 더 난이도가 들어간 두번째 개인 과제가 시작되었다. 처음에는 뭣도 모르고 하다보니 쉬운 느낌이였는데 강의를 듣고 이론을 알게되니 쉬운 작업이 아니였구나 하는 생각이 들었다. 기본과 정석대로 한다는 것이 어쩌면 쉽지만 엄청 어려운 일이다. 블로그 옮기기 현재 사용하고 있는 블로그에 오류가 잦은 것 ..

WIL(Weekly I learned) 이번 주 경험한 모든 일 강의(Figma 활용법 2) 팝업과 모달의 차이, 다양한 컴포넌트의 규칙/가이드라인을 자세히 알게 되었다. 다양한 환경에 따른 UI 차이를 생각해보고 기획을 시각화하는 방법들을 알게 되었다. 프로토타입을 어떻게 활용하면 좋은지 자세히 알게 되었다. 팀 아티클 스터디 진행 사전캠프때 매일 하던 아티클 스터디를 본캠프때는 못했는데 다시 팀으로 시작하다보니 초반에 어려움이 있었다. 그리고 하다보니 다시 익숙해졌다. 이번 주 아쉬웠던 점 / 깨달은 점 / 나의 감정 아쉬웠던 점 : 강의 복습을 하지 못했던 점 깨달은 점 : 디자인 가이드 라인을 만드는 방법에 대해 배우고 직접 만들어 본 점 잘한 점 : 꾸준히 하고 있는 점 나의 감정 : 뿌듯함 /..

1. 이미지 슬라이드 만들기 스크롤 컨테이너를 활용한 이미지 슬라이드=캐러셀(Carousel) 만들기 2. 어코디언 만들기 스마트 애니메이트를 활용한 어코디언=폴더블(foldable)=콜랩서블(collapsible) 만들기 3. 심화) 당근 앱의 글쓰기 버튼 스마트 애니메이트를 활용한 어코디언=폴더블(foldable)=콜랩서블(collapsible) 만들기 🔗 실제작업파일보기

✳️ 프로토타입 1. 프로토타입의 개념 디지털 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것으로 프로토타입을 만들거나 프로토타입을 사용해 테스트하는 것을 프로토타이핑이라고 함 Lo-fi(Low fidelity) : 전체적인 흐름을 빠르게 맞춰볼 수 있는 낮은 단계 Hi-fi(High fidelity) : 실제 제품과 거의 같거나 유사한 수준의 높은 단계 2. 프로토타입을 만드는 이유 1) 실제 제품을 만들지 않고 아이디어를 검증해 볼 수 있음 2) 팀 구성원들과 시각적인 결과물로 소통할 수 있음 3) 부족하거나 놓친 부분을 확인할 수 있음 ✳️ 피그마 프로토타입 소개 1. 피그마 프로토타입 피그마에서 디자인한 화면들을 바로 실제 작동하는 형태로 테스트해 볼 수 있는 유용한 기능 2...

1. UI 차이점 찾아보기 1-1) OS 별로 차이가 있는 부분을 찾아보고, 왜인지 나름의 이유를 적어 보세요. 동일한 앱의 UI가 안드로이드 기기와 아이폰에서 다르게 보이는 부분을 찾고 왜 다른지 다양한 이유를 논의해보기 배달의민족 앱 "메인화면" 폰트적용 : 아이폰의 경우 이미지, 로고 제외한 폰트가 아이폰 기본 폰트로 적용되고 갤럭시의 경우 배민폰트가 적용됨 애플의 디자인 철학이 사용자 경험과 시각적 일관성을 중시하기 때문인 것 같다. 하단고정탭 : 기본 운영체제의 하단 고정 탭 방식의 차이로 아이폰은 드래그와 드래그 후 잠시 멈춰있으면 홈화면과 사용중인 페이지들을 볼 수 있다. 갤럭시는 버튼형식으로 아이폰의 2가지 기능과 뒤로가기 버튼이 추가되어 있다. 배달의민족 앱 "검색창" 폰트적용 : 아이폰..

✳️ 다양한 환경에서의 UI 차이 1. 웹과 앱의 특성 차이점들을 잘 알고 적합한 UI를 설계하는 것이 중요 웹과 앱의 특성 비교 2. 대표적인 웹과 앱의 UI 차이 1) 페이지 이동 : 웹은 주소를 입력해서 어디든 접근이 가능하지만 앱은 이동 불가 2) 뒤로가기 : 앱은 상단 아이콘 등 버튼을 눌러 이동하지만 웹은 브라우저 자체 기능을 통해 이전 화면으로 돌아가는 것이 자유로움 3) 주요 메뉴 이동 : 모바일 웹은 상단에 주요메뉴 UI 배치, 앱은 하단 고정탭으로 배치 4) 바텀 시트(Bottom Sheet) : 바텀 시트는 하단에 고정되어 있는데 앱에서는 다양한 용도로 활용, 모바일 웹에서는 사용이 까다로움 3. OS(Operating System:운영체제)별 차이 OS에 따라 UI를 다르게 사용하는..

✳️ 모달 1. 합성 컴포넌트와 컨테이너 컴포넌트 컴포넌트를 모아 또 컴포넌트를 만드는 경우를 합성 컴포넌트(Compound Component)라고 함. 대부분 버튼 컴포넌트에 파운데이션 또는 컴포넌트가 여러개 합쳐진 형태 컨테이너 컴포넌트에는 바텀시트, 다이얼로그, 리스트, 카드 등 복잡한 구조의 컴포넌트들이 있다. 2. 모달 1. 팝업의 개념 화면 위에 새로운 화면을 띄우는 걸 일반적으로 팝업이라고 함. 2. 팝업의 유형 1) 윈도우 팝업 : 새로운 윈도우(브라우저 창)을 띄워주는 방식 2) 레이어 팝업 : 현재 화면에서 코드로 만든 컴포넌트를 보여주는 방식 3. 모달의 개념 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것으로 UI를 분류하는 기준 중 하나 4. 모달의 종류 팝업..

✳️ 컴포넌트 1. 컴포넌트의 개념 컴포넌트는 파운데이션의 조합을 쌓고 쌓아 만들어지는 구성품 2. 컴포넌트의 모양이 아니라 기능이 중요한 이유 우리는 버튼의 생김새가 아니라 버튼이 하는 일을 기준으로 생각하기 때문 따라서 UI의 목적, UI의 기능에 초점을 두고 공부해야 한다. 3. 컴포넌트의 종류 액션 : 사용자가 중요한 행동을 수행할 때 사용해요. 인풋 : 사용자의 입력을 받을 때 사용해요. 인포메이션 : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용해요. 컨테이너 : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트에요. 내비게이션 : 사용자가 페이지를 이동할 때 사용해요. 컨트롤 : 사용자가 설정이나 값을 수정할 때 사용해요. ✳️ 의사 상태(Pseudo-state) 1. 의사..