[Notion] 노션 이미지 삽입 방법 총정리
[Figma] 피그마 프레임(Frame) 만들기 완전 초보 가이드
피그마에서 프레임을 처음 만들어보는 분들을 위한 기초 가이드를 작성해 보려고 합니다.
프레임의 개념부터 만드는 방법, 활용 팁까지 알아보겠습니다.
디자인 초보, 혹은 기획자들이 피그마를 처음 시작할 때 가장 많이 하는 질문
"프레임이 뭐예요?" 피그마의 프레임은 그냥 사각형이 아닙니다.
우리가 웹, 앱 디자인을 하면서 사용하는 캔버스의 기본이 되는 게 바로 프레임입니다.
위에서 언급했듯 피그마에서 프레임은 화면 , 섹션, 페이지의 뼈대입니다.
디자인을 담을 수 있는 컨테이너이자, 개발자가 구현할 디자인 영역을 정의하는 역할입니다.
예를 들어보겠습니다. '포토샵의 캔버스', 'PPT의 슬라이드', 'HTML의 div 태그'
자 그렇다면 프레임이 필요한 이유를 다시 정리해 보겠습니다.
1. 모바일/웹 UI를 실제 화면처럼 보여줄 수 있음
2. 반응형 디자인을 시뮬레이션
3. 다른 프레임과 비교와 정렬이 쉬움
4. 개발자 전달 시 export의 기준이 됨
프레임 만들어보기
자 간단하게 단축키 F, 혹은 하단에 격자 모양을 클릭해서 프레임을 추가해 주세요
자 그럼 프레임 위에 중첩 프레임(프레임 하나 더 그리기)을 해보겠습니다.
이건 복잡한 화면을 설계할 때 아주 유용하게 사용할 수 있는 기능입니다.
자 상단의 이미지는 아이패드 프로 11 크기에 아이폰 16 프로 맥스를 중첩한 상태입니다.
이런 형태로 활용할 수 있습니다.
또한 작업물을 확인하기 위해서 Layer에 생성된 항목 중 하나를 우클릭하여 Rename을 통해
이름을 변경할 수 있습니다.
프레임은 복사와 붙여넣기도 가능합니다. 그래서 상단 이미지를 보시면 아이패드가 2개 생성되어 있는걸 보실 수 있습니다.
피그마에서 프레임은 단순히 화면을 그리는 공간이 아닙니다.
전체 UI의 흐름을 계획하고, 깔끔하게 정리할 수 있게 도와주는 핵심 도구입니다.
오늘 배운 방법대로 차근차근 연습하면 복잡한 앱이나 웹 디자인도 프레임부터 깔끔하게 시작할 수 있습니다.
읽어주셔서 감사합니다.
추가로 궁금하신 내용이 있으시다면 하단의 링크를 참고해 주세요
피그마 도형 도구(사각형, 원, 선) 사용법
피그마에서 새 디자인 파일 만드는 법
파이썬 VSCode 연동 설치법, 왕초보도 10분이면 끝!
이 블로그의 인기 게시물
[Notion] 노션 기본 템플릿 5가지 소개와 활용 팁
노션 초보자를 위해 쉽게 활용할 수 있는 기본 템플릿 5가지를 추천합니다. 할 일 관리, 회의 노트, 독서 기록 등 누구나 쉽게 따라 할 수 있는 방법을 소개합니다. 노션, 템플릿 부터 시작해보세요 노션(Notion)을 처음 접하셨을까요? 너무 복잡하거나 어려울 것 같다고 느낄 수 있습니다. 그렇다면 기본 템플릿부터 활용해 보는 게 좋습니다. 노션에는 이미 기존에 만들어진 기본 템플릿이 있어서 클릭 몇 번만으로 멋진 페이지를 만들 수 있습니다. 이 글을 통해서 가장 유용하고 많이 쓰이는 노션 템플릿 5가지와 함께, 어떻게 활용하면 좋은지 알아보겠습니다. 하단에 보이는 Tamplates를 클릭해 주면 템플릿이 모여 있는 페이지로 이동합니다. 그러면 여기서 먼저 To-Do List를 입력하고 추가해 보도록 하겠습니다. 자 검색했더니 이렇게 다양한 To-do list 항목이 나옵니다. 저는 이 중에서 오른쪽 위에 있는 템플릿을 선택했습니다. Free는 무료로 이용할 수 있는 템플릿이고 가격이 적혀있는 템플릿은 결제를 통해 추가할 수 있는 템플릿입니다. 자 그러면 이렇게 Weekly Plan으로 To-do list가 추가된 걸 확인할 수 있습니다. 쉽게 추가가 되고 바로 페이지에 추가되니깐 쉽게 활용할 수 있습니다. 같은 방법으로 다른 템플릿도 추가해 보도록 하겠습니다. 주간 일정 관리 독서 목록 회의 기록 목표 설정 자 가장 위에 부터 '할 일 목록', '주간 일정 관리', '독서 목록', '회의 기록', '목표 설정' 총 다섯 가지의 템플릿을 추가해봤습니다. 추가된 템플릿을 아이콘 등을 추가하거나 섹션을 다시 나누는 등의 기능을 활용해서 자유롭게 사용할 수 있습니다. 또한 추가된 템플릿은 다른 페이지와 연결할 수 있기 때문에 연동해서 쓸 수도 있습니다. 일단 간단하게 활용할 수 있는 노션 템플릿 5종만 먼저 소개했습니다. 처음 노션을 시작할 때 복잡하게 느껴질 수 있지만 기본 템플릿을 활용...
[Blender] 블렌더 속도 2배! 꼭 알아야 할 단축키와 설정 팁
쉽게 배우는 블렌더 단축키, 커스터마이징 블렌더는 디자인과 애니메이션 거기에 영상 편집까지 가능하게 해주는 무료 프로그램입니다. 하지만 효율성이 떨어진다면 작업 시간이 매우 오래 걸릴 수 있습니다. 그렇기 때문에 효율성을 극대화시켜줄 단축키를 알아보도록 하겠습니다. 블렌더 단축키? 저도 처음에는 그랬습니다. 단축키를 많이 모르다보니 모든걸 마우스로 해결하려고 했었습니다. 하지만 그렇게 작업을 하다 보면 효율이 떨어지고 속도도 떨어집니다. 그런데 단축키를 알고 나서 효율이 급격하게 늘어나더라고요 그래서 전달해드리려고 합니다. 효율을 극대화 시켜줄 블렌더 단축키와 커스터마이징을 알아볼게요 크기 초기화 Alt + S 회전 초기화 Alt + R 위치 초기화 Alt + G 크기 조절 S 오브젝트 회전 R 오브젝트 이동 G 위에서 간략하게 단축키를 눌렀을 때 어떻게 조작이 가능한지 설명했는데요 다시 정리하겠습니다. 이동(G): 오브젝트를 원하는 위치로 이동 시킬 수 있습니다. 회전(R): 오브젝트를 원하는 각도로 회전 시킬 수 있습니다. 스케일 조정(S) 오브젝트를 원하는 크기로 키우거나 줄일 수 있습니다. 위치 초기화(Alt + G): 이동 시킨 오브젝트의 위치를 초기화 합니다. 회전 초기화(Alt + R): 회전 시킨 오브젝트의 회전을 초기화 합니다. 크기 초기화(Alt + S): 키우거나 줄인 오브젝트의 스케일을 초기화 합니다. 그 다음은 카메라 조작에 대한 단축키 입니다. 숫자키 1 ~ 0 숫자키를 이용하면 오브젝트가 보여지는 카메라의 각도를 조정할 수 있습니다. 1번부터 0번까지 원하는 카메라 방향대로 오브젝트를 볼 수 있습니다. 하지만 이때 노트북에서 넘버 패드가 없는 경우, 텐키리스 키보드를 사용할 때 설정이 필요합니다. 텐키리스 키보드를 사용하는 경우 Edit -> Preferences -> Input -> Emulate Nupad 옵션을 켜야 숫자키를 눌렀을 때 카메라를 회전 시킬 수 있습니다. 간단하게 몇 개 더 알아보도록 하...
[Blender] 블렌더 미러 모디파이어(Mirror Modifier) 활용법
Blender에서 미러 모디파이어(Mirror Modifier)를 활용하여 좌우 대칭 모델을 빠르고 정확하게 만드는 방법!! 3D 모델링을 하다 보면 양쪽이 똑같은 형태가 있습니다. 예시를 들어보도록 하겠습니다. 사람 얼굴, 동물의 뿔, 건축물의 좌우 대칭 등 이런 구조들을 자주 만들거나 활용하게 되는데요 이런 작업을 직접 수작업으로 하다 보면 시간이 굉장히 오래 걸립니다. 그렇기 때문에 오늘 알아볼 미러 모디파이어(Mirror Modifier)를 활용해야하는건데요 이 그대로 한쪽을 만들면 반대쪽이 자동으로 복사되기 때문에, 작업 시간은 반으로 정확도는 두 배로 올라가게 됩니다. 우리는 이 글을 통해서 Blender 미러 모디파이어의 기본 사용법부터 실전 활용까지 차근차근 알아볼 예정입니다. 미러 모디파이어가 뭘까요? 미러 모디파이어는 위에서 언급했듯이 한쪽 면을 기준으로 반사된 복사본을 자동으로 생성하는 기능입니다. 블렌더의 기본 모디파이어 중 하나인데요. X, Y, Z축 중 원하는 축을 중심으로 대칭이 만들어집니다. 자 일단 원래 처음에 있던 큐브는 삭제하고 Shitf + A 단축키를 눌러서 평평한 Plane 하나를 추가해 줬습니다. 그리고 우측에 렌치 모양을 눌러서 'Add Modifier'를 클릭한 후 Mirror를 검색해서 추가했습니다. 자 기본적으로 X축 대칭이 적용됩니다. 위의 이미지와 비교해 보면 X축뿐 아니라 Y, Z축까지 활성화한 상태인 게 보이시죠? 일반적으로는 X축만 활성화 한 상태로 활용합니다. 자 그럼 Edit Mode로 들어가서 한쪽 면만 들어볼게요 그럼 어떻게 될까요? 자 한쪽 면만 들어올리는데 반대쪽 면도 같이 올라오는 게 보이시죠? 간단하게 살펴보면 미러 모디파이어는 이렇게 활용할 수 있습니다. 추가로 알아볼 내용은 오브젝트 중심으로 맞추는건데요 미러 축은 오브젝트 중심점(Origin)을 기준으로 작동합니다. Shift + S -> Cursor to World Origin Ctrl + A -> Set O...