전체 글

피그마 베이직 파일 다운로드/Chapter 2 Frame의 특성과 기능

2-1 프레임과 그룹

챕터 2-1 편을 작성했습니다. 아래 링크를 통해 다운로드 하실 수 있습니다. 한꺼번에 다운받을 수 있는 링크 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ https://drive.google.com/file/d/14Xgk7FECSJ5gjWTMmrMbmlqe_3TK8CIc/view?usp=sharing 2-1 프레임과 그룹.pdf drive.google.com https://drive.google.com/file/d/1lFiK0ONSV5bV9SVcPMF-SORoe0KePucG/view?usp=sharing 2-2 패스 고급 사용.zip drive.google.com

피그마 베이직 파일 다운로드/Chapter 1 도구의 사용과 특징

1-5 효과 사용하기

챕터 1-5 편을 작성했습니다. 아래 링크를 통해 다운로드 하실 수 있습니다. 한꺼번에 다운받을 수 있는 링크 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ https://drive.google.com/file/d/1BvXdAbQJKTVpu5r2_lVZUCklL4P2dSRf/view?usp=sharing 1-5 효과 사용하기.pdf drive.google.com https://drive.google.com/file/d/1DtcPiqnu623u5D2QXLEgfk3mzbscAZ11/view?usp=sharing 1-5 효과 사용하기.zip drive.google.com

피그마 베이직 파일 다운로드/Chapter 1 도구의 사용과 특징

1-4 프레임 사용하기

챕터 1-4 편을 작성했습니다. 아래 링크를 통해 다운로드 하실 수 있습니다. 한꺼번에 다운받을 수 있는 링크 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ https://drive.google.com/file/d/1z60hziDeJozLzUQYJTtiSEKt_Yn0nxkI/view?usp=sharing 1-4 프레임 사용하기.pdf drive.google.com https://drive.google.com/file/d/1wCoUAXQrqQGx4we-nVmhjUEIpYbwbUQo/view?usp=sharing 1-4 프레임 사용하기.zip drive.google.com

피그마 베이직 파일 다운로드/Chapter 1 도구의 사용과 특징

1-3 컬러 패널과 레이어 패널

챕터 1-3 편을 작성했습니다. 아래 링크를 통해 다운로드 하실 수 있습니다. 한꺼번에 다운받을 수 있는 링크 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ https://drive.google.com/file/d/1eLWeVJuNiL9EYU8bEit14pM5Qr8JyxtF/view?usp=sharing 1-3 컬러 패널과 레이어 패널.pdf drive.google.com https://drive.google.com/file/d/1cSmvdMxBKmAq-WReXxdXzm713Je2e557/view?usp=sharing 1-3 컬러 패널과 레이어 패널.zip drive.google.com

피그마 베이직 파일 다운로드/Chapter 1 도구의 사용과 특징

1-2 텍스트 다루기

챕터 1-2 편을 작성했습니다. 아래 링크를 통해 다운로드 하실 수 있습니다. 한꺼번에 다운받을 수 있는 링크 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ https://drive.google.com/file/d/1s_ulrEyxmFXyucjCwLiDw8Rdl_8EnMXl/view?usp=sharing 1-2 텍스트 다루기.pdf drive.google.com https://drive.google.com/file/d/1g-tfoi3DOGV6M2fuayU0YCnODO7UdU9F/view?usp=sharing 1-2 텍스트 다루기.zip drive.google.com

피그마 베이직 파일 다운로드/Chapter 1 도구의 사용과 특징

1-1 패스와 기본 도형 도구의 사용

챕터 1-1 편을 작성했습니다. 아래 링크를 통해 다운로드 하실 수 있습니다. 한꺼번에 다운받을 수 있는 링크 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ https://drive.google.com/file/d/1Dqi_Gh92yOQgIJNgceoh0ay-NpOLXGJ0/view?usp=sharing 1-1 패스와 기본 도형 도구.pdf drive.google.com https://drive.google.com/file/d/1PAHv4OAGb1NDtZ5EGFFjik-4DBBuzzYv/view?usp=drive_link 1-1 패스와 기본 도형 도구.zip drive.google.com

피그마 베이직 파일 다운로드/Chapter 0 인터페이스

0-2 디자인 파일 인터페이스

디자인 파일 인터페이스 편을 작성했습니다. 아래 링크를 통해 다운로드 하실 수 있습니다. 한꺼번에 다운받을 수 있는 링크 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ https://drive.google.com/file/d/1XKlCYqsAR6vIcq0e6gxNb4gHfCtioc-J/view?usp=sharing 0-2 디자인 파일 인터페이스.zip drive.google.com https://drive.google.com/file/d/1-qWkVpC4N0_rqaGKqisNTY9RtX775mWF/view?usp=sharing 0-2 디자인 파일 인터페이스.pdf drive.google.com

피그마 베이직 파일 다운로드/Chapter 0 인터페이스

0-1 홈 & 커뮤니티 인터페이스

홈 & 커뮤니티 인터페이스 편을 작성했습니다. 아래 링크를 통해 다운로드 하실 수 있습니다. 한꺼번에 다운받을 수 있는 링크 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ https://drive.google.com/file/d/1IEfNBTFCeW-y7C7dct2GOuQZDrVkv4yi/view?usp=sharing 0-1 홈 & 커뮤니티 인터페이스.zip drive.google.com https://drive.google.com/file/d/1y4v1BjsuMXkw_stzJm5uJlGum6BoadVj/view?usp=sharing 0-1 홈 & 커뮤니티 인터페이스.pdf drive.google.com 피드백은 언제나 환영입니다 많은 댓글과 관심 부탁드립니다. 감사합니다.

피그마 베이직 파일 다운로드/공지사항

새롭게 신설된 페이지 안내

안녕하세요, 오구리입니다. 간만의 블로그 포스팅 소식으로 찾아뵈었습니다. 한동안은 블로그에 이전에 제가 제작했던 자료들을 묶어 Figma Basic이라는 이름으로 포스팅을 진행할 예정입니다. 사실 그간 UX와 UI를 진행하며 기존에 쌓아 왔던 자료들과 작업들을 모아서 한데 묶는 작업이 필요하다 느꼈습니다. 저 스스로도 혼란스럽고 작업 프로세스에 대한 정립 없이는 다음 단계로 넘어가기 힘들겠다는 생각이 들었구요. 그래서 이번 기회에 제가 생각했던 프로세스나 방법, 구성, 자료들을 풀어보고 싶어졌습니다. 어떠한 피드백이어도 좋으니 많은 분들께서 보시고 이야기해주셨으면 좋겠습니다. ( 다만 당부드릴 것이 제 @frogOlis 아이디와 카피라이트, 캐릭터는 절대 삭제하지 말도록 당부 드립니다. 저작권을 지켜주세..

Unreal5로 UI만들어보기/1) UMG 사용하기

UMG 6편 : 슬롯(slot) (1) - 패널(Panel)의 사용

언리얼에서 화면에 어떻게 배치할지를 정하는 기능 슬롯(Slot)에 대해서 살펴볼 건데요. 이를 제대로 사용하려면 패널 위젯(Panel Widget)의 특성을 이해하실 필요가 있습니다. 그래야 원하는 배치를 만들 수 있기 때문입니다. 그럼 지금부터 시작해 보겠습니다. 1. 위젯에 올 수 있는 자식의 수는? 일단 먼저 위젯을 좀 살펴보겠습니다. 위젯에 마우스를 올려 놓으면 해당 위젯의 설명과 함께 Single Child , Many Children , No Children 를 보실 수 있는데요, 여기서 자식(Child)이란 하이어라키에서 하위 요소로 올 수 있는 위젯의 수를 의미합니다. 아무것도 올 수 없거나(No Children), 1개만 올 수 있거나(Single), 다수(many)를 집어넣을 수도 있습..

Unreal5로 UI만들어보기/1) UMG 사용하기

UMG 5편 : 버튼 이벤트에 기능 텍스트 출력 기능 부여하기

곰곰히 생각해봤는데 이대로 끝내기엔 버튼 같지가 않으므로, 버튼에 텍스트 출력 기능을 하나 넣어 볼게요. 1. 버튼에 이벤트 연결하기 지난 시간에 만들어 둔 버튼이 생성된 위젯 블루프린트를 열어줍니다. 그리고 버튼을 선택 해 주세요. 버튼 이벤트를 생성해 보겠습니다. 디자이너 패널과 그래프 탭 모두에서 버튼 이벤트를 생성할 수 있습니다. 다만 반드시 '변수로 등록(Is Variable)'이 되어 있어야 하는데 그 작업 부터 해 주겠습니다. 2. Is Variable : 변수화하기 변수화는 별건 아니고 그래프에서 '활용 가능한 대상'으로 만드는 작업이라고 보시면 됩니다. 디테일 패널의 최상단에 위치한 Is Variable 을 체크하여 활성화합시다. 체크가 되어야 변수로 등록되고, 이벤트를 생성할 수 있게 ..

도서 리뷰

도서 리뷰 : 한입 크기로 잘라먹는 리액트

이전에 도서 리뷰 이벤트에 당첨되었습니다. 이번에 소개해 드릴 책은 "한입 크기로 잘라먹는 리액트" 입니다. 이전 유데미와 인프런에서 많은 분들께 사랑 받았던 강의를 조금 더 업그레이드 해서 도서로 출간한 거라고 합니다. 조금 더 자세히 살펴보겠습니다. 1. 구성 소개 총 11장과 3개의 프로젝트로 구성되어 있습니다. 프로그래밍 곻부에서 좀 힘들었던게 '프로젝트는 어떻게 만드는가?' 에 대한 답을 내리는 거였는데요. 이 책에서는 JS기초부터 프로젝트 배포까지 전 과정을 다뤄 주고 있습니다. 웹에는 수많은 자료가 있지만, 이렇게 전체적인 개괄을 다뤄 주는 경우가 별로 없고 수많은 지식에 깔려 초보자들이 중도 포기하게 되는 경우가 잦아 문제가 많았는데 현재 구성이 좋아서 해당 기능 등을 하나하나 소화시키기에..

frogOlis
오구리의 디자인시스템노트