사전캠프(23.11.20~12.15)/UXUI 사전캠프 데일리 미션 - 3주차 (6) 썸네일형 리스트형 [금]▸ 이번 주 학습내용 관련 WIL WIL (Weekly I learned) 지난 일주일을 돌아봄으로써 나의 현재 상태를 파악 내일배움캠프 3주차가 끝났다. 3주차 까지 들으면서 드는 생각은 컴포넌트, 컴포넌트 프로퍼티, 베리언트, 오토레이아웃 개념이 가장 핵심적이고 중요하다는 생각이 들었다. 이 네가지에 대해서 다시 정리 할 필요가 있고 적용시키고 연습을 많이 해야겠다는 생각이 든다. 캠프를 진행하면서 데일리 미션이 주어지고, 강의 진행을 한다. 이 두가지 갈래를 6시간 안에 끝내려면 뭔가 한가지를 포기해야 하는 느낌이 든다. 피그마 구현에 집중해서 파고들어 기능을 파악하는 주력이 있다면, 전체적인 미션 수행과 수강 진행 속도를 신경을 고루 써서 진도에 신경을 쓰는 주력이 있다고 생각한다. 현재 나는 후자로 진행중이다. 때문에 피그마 툴.. 3주차 숙제 : 클릭하면 이동하는 피그마 프로토타이핑 피그마 프로토타입이란? 화면의 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을 때 어떤 화면으로 어떤 인터랙션 스타일(클릭, 드래그, 스크롤 등)로 이동할 것인지 목업으로 보여주는 것. 피그마 프로토타입 핫스팟(Hot Spot) : 파란색 기준이 되는 점, 인터랙션이 시작하는 위치 커넥션(connection) : 라인 핫스팟과 이어지는 두개의 요소 사이의 연결 선. 이 선을 클릭하면 프로토타입의 세부적 설정 가능. 데스티네이션(Destination) : 핫스팟에서 커넥션으로 연결한 도착점이 되는 요소를 의미 트리거 종류 (트리거=이벤트) ① On click - 요소를 클릭했을 때입니다. ② On drag - 요소를 가로, 세로 방향으로 드래그 했을 때입니다. ③ while hoverin.. [수,목,금]▸ 선정한 앱 서비스 클론디자인 1. 앱 서비스 선정 2. 작업물 소개 (https://www.figma.com/file/9FJxtwwZwp6H3dc1htQsTm/1206-%EC%86%A1%EB%AF%BC%EC%A7%84-%EC%95%B1%ED%81%B4%EB%A1%A0%EB%94%94%EC%9E%90%EC%9D%B8?type=design&node-id=0%3A1&mode=design&t=hA2ckGLBdeDfQ0Yf-1) 앱 클론 디자인은 카테고리에 따라 화면이 여러가지라서 작업하는데 오랜 시간이 걸렸다. 처음 해보는 앱 클론 작업이라서 많은 시행착오가 있었다. 버튼을 눌렀을때 기존 버튼 몇개가 사라지는 베리언트를 만드는데 어려움을 겪었다. 단순히 버튼을 컴포넌트화 시켜서 액션을 넣어야 하는지, 아니면 아예 버튼 클릭시에 버튼이 삭제.. [화]▸ 앱 서비스 선정 (ex. 토스, 29cm) 및 회원가입 프로세스 분석 및 개선 아이디어 정리 1. 앱 서비스 선정 가장 최근까지도 많이 사용했던 골프로그 앱 "TheGrint"이다. TheGrint는 사용자들끼리 스코어를 공유하고 경쟁할 수 있는 기능을 제공하며, 점수 기록과 통계, 핸디캡 계산 등 다양한 기능을 제공한다. 또한, 코스 정보와 날씨 정보를 확인 할 수 있어서 라운딩을 더욱 편리하게 즐길 수 있다. 2. UI/UX 디자인 분석 (1) 회원가입 제공 시점 앱 실행 이후, 바로 'Join for free'과 'Login' 버튼을 선택할 수 있는 창이 뜬다. - 회원가입 버튼에는 색을 넣어서 강조하고 엄지손가락이 쉽게 닿을 수 있는 위치에 놓음. (2) 회원가입 프로세스 : 유저 플로우 (https://www.figma.com/file/o6Qp3gciLcFw6j2e6qPqtJ/1205-.. [월]▸ UI/UX 디자인 용어 정리 UXUI 용어 정리 GNB : 웹사이트 최상위 메뉴를 GNB라고 부름. 모든 페이지에서 공통적으로 보이는 메뉴바. 대부분 상단에 위치 LNB : GNB 메뉴를 클릭 혹은 마우스 올린 상태(hover) 일 때 보이는 메뉴로 서브 페이지, 특정 메뉴로 이동 가능 SNB : 상단 메뉴를 제외한 왼쪽에 붙은 메뉴바 SNB 혹은 LNB(Left Navigation Bar)라고 부름 FNB : Footer : 최하단 메뉴로 FNB 라고 부름. 로고, 주소, 전체 메뉴 영역 외에도 SNS 채널, 패밀리 사이트 등을 배치 Tab Menu : 병렬형 콘텐츠를 보여줄 경우 상당에 Tab 탭으로 표현하며, 탭으로 다른 카테고리를 클릭하여 화면을 전환할 수 있음. FAB : 플로팅 버튼은 페이지 내에서 관련성이 높거나 자주 .. [월]▸ UI/UX 디자인 아티클 스터디 12.04(월요일) 1️⃣ 오늘의 아티클(주제) - UI UI 용어를 정리해야 하는 이유(https://brunch.co.kr/@tigrisdesign/2) 아티클 정보 요약(핵심) 팀 내, 타 부서와의 원활한 소통을 위해서 UI 용어 정리 인사이트(개념 1~3개) 용어들을 각자 쓰고 싶은대로 쓰거나, 의미를 잘못 이해하고 또 정확히 파악하기 어려운 경우가 종종 발생한다. 때문에 용어 정리를 정확히 짚고 넘어가면 좋다. 원활한 소통을과 수정을 최소화 하기 위해 서로 알맞은 용어를 사용하자. 2️⃣ 오늘의 아티클(주제) - UI UI 디자인 가이드 : 디자이너의 즐겨찾기(https://brunch.co.kr/@august9/345) 아티클 정보 요약(핵심) 디자이너를 위한 25가지 리소스 공유- 디자이너가.. 이전 1 다음
