사전캠프(23.11.20~12.15) (20) 썸네일형 리스트형 4주차 숙제 : 피그마로 포트폴리오 템플릿 만드는 방법 주제 : 피그마로 포트폴리오 템플릿 만드는 방법 4-2 Plugin 포트폴리오를 만드는 이유는 시각 자료로 잘 정리해서 보여주는 목적이다. 피그마의 ppt - 커뮤니티 소스를 간단하게 수정하면 빠르게 자료를 만들 수 있다. 노가다 없이, 디자인 감각 없어도 예쁘고 빠르게 자료를 만들 수 있다. 무료이고, 아이콘, 인포그래픽 도형, 텍스트 스타일, 목업이미지 등을 만들 수 있다. Tip! 피그마 커뮤니티에서 영어로 자료를 검색해 본다. ex) portfolio +Mockup : 무료 이미지를 빠르게 가져와서 퀄리티를 높일 수 있다. +Unsplash : 프로필 화면을 빠르게 수정할 수 있다. +Wireframe Designer : 빠르게 와이어프레임을 가져와서 시각화 할 수 있다. 4-3 Icon 빠르게 .. [금]▸ 이번 주 학습내용 관련 WIL WIL (Weekly I learned) 지난 일주일을 돌아봄으로써 나의 현재 상태를 파악 내일배움캠프 3주차가 끝났다. 3주차 까지 들으면서 드는 생각은 컴포넌트, 컴포넌트 프로퍼티, 베리언트, 오토레이아웃 개념이 가장 핵심적이고 중요하다는 생각이 들었다. 이 네가지에 대해서 다시 정리 할 필요가 있고 적용시키고 연습을 많이 해야겠다는 생각이 든다. 캠프를 진행하면서 데일리 미션이 주어지고, 강의 진행을 한다. 이 두가지 갈래를 6시간 안에 끝내려면 뭔가 한가지를 포기해야 하는 느낌이 든다. 피그마 구현에 집중해서 파고들어 기능을 파악하는 주력이 있다면, 전체적인 미션 수행과 수강 진행 속도를 신경을 고루 써서 진도에 신경을 쓰는 주력이 있다고 생각한다. 현재 나는 후자로 진행중이다. 때문에 피그마 툴.. 3주차 숙제 : 클릭하면 이동하는 피그마 프로토타이핑 피그마 프로토타입이란? 화면의 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을 때 어떤 화면으로 어떤 인터랙션 스타일(클릭, 드래그, 스크롤 등)로 이동할 것인지 목업으로 보여주는 것. 피그마 프로토타입 핫스팟(Hot Spot) : 파란색 기준이 되는 점, 인터랙션이 시작하는 위치 커넥션(connection) : 라인 핫스팟과 이어지는 두개의 요소 사이의 연결 선. 이 선을 클릭하면 프로토타입의 세부적 설정 가능. 데스티네이션(Destination) : 핫스팟에서 커넥션으로 연결한 도착점이 되는 요소를 의미 트리거 종류 (트리거=이벤트) ① On click - 요소를 클릭했을 때입니다. ② On drag - 요소를 가로, 세로 방향으로 드래그 했을 때입니다. ③ while hoverin.. [금]▸ 이번 주 학습내용 관련 WIL WIL (Weekly I learned) 지난 일주일을 돌아봄으로써 나의 현재 상태를 파악 내일배움캠프 시작 주로부터 벌써 2주가 지나갔다. 느리면서도 또 굉장히 빠르게 지나간 것 같다. 강의학습과 미션으로 살펴보자면, 벌써 2주차가 끝났나 싶다. 몰입도가 아주 좋기 때문이다. 강의는 언제 다 듣지 했는데 몰입해서 듣자하니 내용이 더 들어갔으면 싶고, 미션으로 하루하루를 채워 나가다 보니 시간이 가는 것이 무섭다. 그 사이에 배운 거라고는 고작 몇 가지 안되는 것 같은데…. 아쉬운 마음이 크게 든다. 아침에 일찍 일어나서 (파리시간 상 오전 7시) 바로 수업에 들어가는 패턴이 자리를 잡은 지 2주차 끝이다. 짧은 시간 동안에 좋은 습관이 꽤 몸에 베었다. 거시적으로 생각하면 갈 길이 멀다 하고 느껴진다... [금]▸ 컴포넌트 만들기 1, 2주차 강의를 토대로 마음에 드는 웹사이트의 컴포넌트를 만들어봅시다. LG전자의 화면이 가장 옵션이 많아서 선택했습니다. https://www.lge.co.kr/benefits/exhibitions/detail-PE00364001?tab=special-price&eventCode=aoexngdn&utm_source=gdn&utm_medium=banner&utm_campaign=20230701_pmax_feed_ao_only_pp&utm_content=gdn_pmax_feed_pur_ao_nt&gad_source=1&gclid=CjwKCAiA0syqBhBxEiwAeNx9N6aVV_7j2AjaHCFXr-dqUB-ocRNDv6IiUvnT-VahYVh_UrNrV2TcNBoCKjEQAvD_BwE 피그마로 컴.. 2주차 숙제 : 오토레이아웃 사용법으로 자기만의 강점 형용사 5개 버튼 만들어보기 보호되어 있는 글입니다. 1주차 숙제 : 피그마 플러그인을 활용한 유저 플로우 Resources 클릭한다. 이후에 Plugins 클릭 후에 Flow chart 검색 한 후 Run해주면 된다. 모양을 선택한 후 상하좌후 필요한 화살표를 선택하면, 연속해서 차트를 이어 나갈 수 있다. 필요하면 가로로도 차트를 이어 나갈 수 있다. 문제나 작업의 범위를 결정하고 분석하며, 그 해석 방법을 명확히 하기 위해서 필요한 작업과 처리의 순서를 통일된 기호와 도형을 사용하여 도식적으로 표시한 것. 프로그램에 관해서는 논리(logic)의 흐름을 특정한 순서도 기호(flow chart symbol)를 사용하여 도식적으로 표현한 다이어그램을 가리킨다. [금]▸ 이번 주 학습내용 관련 WIL WIL (Weekly I learned) 지난 일주일을 돌아봄으로써 나의 현재 상태를 파악 Figma 강의를 보면서 어떤 툴인지 이해했다. 다만, 정확한 개념을 잡기에는 아직 부족한 것 같아 책을 구입하기로 했다. 컴포넌트, 컴포넌트 프로퍼티, 베리언트, 오토레이아웃 개념에 대해 정확하게 알고 가야 할것이다. "UXUI 디자이너를 위한 실무 피그마" 이 책을 보면서 다시 개념을 잡아햐 할 것 같다. UX/UI 디자이너를 위한 실무 피그마 UX/UI 디자인 실무는 학교에서 배우기 어려워 온라인 클래스의 도움을 받는 실정이다. 이런 점을 감안하여 다른 튜토리얼 책에서는 볼 수 없는 현업에서의 디자인 시스템, 개발 전달 과정을 자세히 기술하여 실무를 전달하려 노력했다. 이 책은 두 부분으로 나누어 1부에서는 .. 이전 1 2 3 다음
