RaphaelsScienceFacility

  ChatGPT 생성형 이미지 피그마 Component의 개념부터 실제 화면 제작에 사용하는 방법까지 단계별로 정리합니다. 복잡한 기능 없이 핵심만 이해할 수 있도록 구성했습니다. 화면을 여러 개 만들다 보면 같은 버튼, 같은 카드, 같은 메뉴를 계속 다시 만들어야 하는 상황이 반복됩니다. 처음에는 복사해서 붙여넣으면 해결되는 것처럼 보이지만, 수정이 필요해지는 순간 문제가 발생합니다. 하나만 고치면 되는 작업이 아니라, 모든 화면을 하나씩 찾아가며 수정해야 하기 때문입니다. 이 문제를 해결하기 위해 등장한 개념이 Component 입니다. Component는 “한 번 만들어 두고, 여러 곳에서 같은 형태로 사용하는 설계 단위”라고 이해하면 됩니다. 형태가 같고, 역할이 같은 요소를 묶어 관리하는 방식입니다. 피그마에서 Component를 사용하면 화면 제작 속도가 빨라지고, 수정 작업이 단순해집니다. 무엇보다 작업 중 실수가 줄어듭니다. 같은 버튼인데 크기가 다르거나 색이 다른 상황을 원천적으로 막을 수 있기 때문입니다. 이 글에서는 Component가 무엇인지부터 시작해, 왜 필요한지, 어떻게 만드는지, 실제 화면에서 어떻게 활용하는지까지 단계별로 설명합니다. 불필요한 기능 설명은 모두 제외하고, 반드시 알아야 할 핵심만 다룹니다. Component란 무엇인가 Component는 기준이 되는 원본 요소 입니다. 이 원본을 기준으로 복사본을 여러 개 만들어 사용할 수 있습니다. 여기서 중요한 점은 단순한 복사가 아니라는 것입니다. Component로 만든 요소는 모두 하나의 기준과 연결되어 있습니다. 기준이 바뀌면 연결된 모든 요소가 함께 바뀝니다. 피그마에서 Component는 크게 두 가지로 나뉩니다. Main Component : 기준이 되는 원본 Instance : 원본을 기반으로 만들어진 복사본 Main Component는 수정 권한이 있는 설계도이고, Instance는 설계도를 바탕으로 배치한 결과물이라고 이해...

  피그마와 같은 디자인 툴을 사용할 때 단축키를 아는 것만으로도 작업 속도를 비약적으로 올릴 수 있습니다. 마우스로 메뉴를 일일이 찾아 들어가는 것보다 단축키를 익히고 활용하게 된다면 훨씬 빠르고 효율적인 디자인 작업이 가능합니다. 이 글에서는 피그마 초보자도 금방 익힐 수 있는 기본 단축키를 소개하려고 합니다. 하나씩 연습하다 보면, 자연스럽게 손에 익어 작업 시간이 줄어드는 걸 직접 체감할 수 있습니다. 피그마 기본 단축키 개념 정리 이동 및 선택 관련 도구 V: Move Tool(이동 도구): 오브젝트를 이동할 수 있도록 해주는 단축키 K: Scale Tool(크기 조절): 오브젝트 스케일의 크기를 바로 조정 하는 단축키 Shift + 드래그: 정비율로 이동하거나 크기를 조절하는 단축키 도형 & 텍스트 삽입 R: 사각형(Rectangle): 사각형 오브젝트를 추가할 수 있는 단축키 O: 원(Ellipse): 원 오브젝트를 추가할 수 있는 단축키 T: 텍스트(Text) 삽입: 글을 작성할 수 있는 영역을 잡는 단축키 레이어 & 그룹 관리 Ctrl + G: 그룹(Group) > 여러 개의 오브젝트를 하나로 묶는 단축키 Ctrl + Shift + G: 하나의 그룹으로 묶인 오브젝트를 개별로 다시 나누는 단축키 Alt + 드래그: 객체 복사 기능 정렬 & 배치 Ctrl + [: 앞으로 가져오기: 뒤에 가려진 항목을 앞으로 가져오는 기능 Ctrl + ]: 뒤로 보내기: 앞단에 있는 항목을 뒤로 보내는 기능 Shift + A: Auto Layout 적용 적용 예시 빠른 와이어 프레임 제작 와이어 프레임 작업 시 R 키로 사각형을, T 키로 텍스트를 빠르게 배치하면 일일이 클릭으로 추가하는 것보다 훨씬 빨라집니다. 디자인 요소 정리 여러 개의 버튼을 만들었다면 Ctrl + G로 그룹화해 관리하는 것이 편할 수 있습니다. 필요시 Ctrl + Shift + G로 그룹을 해제하고 작업할 수 있습니다. 반복 요소 활용 같은 아이콘을 여러 ...

  디자인하다 보면 자연스럽게 "어떤 색상을 쓸까?", "이미 적용한 색을 바꾸려면 어떻게 할까?" 이런 고민을 하게 됩니다. 특히 피그마는 웹 기반이기 때문에 버튼, 텍스트 ,배경 등 모든 요소에 색을 자유롭게 적용할 수 있기 떄문에 고민이 더 깊어질 수 있습니다. 그래서 일단은 피그마에서 색상을 선택하고 변경하는 방법에 대해서 알아볼 예정입니다. 색상 선택 방법 피그마에서 색상을 선택하는 기본 방법은 아주 간단합니다. 오브젝트를 먼저 선택해 주세요 색상을 바꾸고 싶은 도형, 텍스트, 아이콘 등이 있겠죠 오브젝트를 선택한 후에 오른쪽 속성 패널에서 Fill(채우기)에서 색상을 클릭하면 아래 이미지처럼 색상을 선택할 수 있는 UI가 나옵니다. 변경하고자 하는 색상을 선택해 주면 됩니다. 이때 색상을 변경하는 방법은 총 세 가지입니다. 색상 피커를 직접 드래그 해서 색상을 변경하는 방법 HEX 코드를 입력(예시: #FF0000, #00FF00 등) RGBA 값 입력 - Red, Green, Blue, Alpha(투명도) 값을 직접 입력합니다. 이렇게 하면 원하는 색상을 아주 정밀하게 선택할 수 있습니다. 색상 변경 & 관리 방법 색상을 고른 뒤에는 프로젝트 전반적으로 일관성 있게 사용하거나 상황에 맞게 변경해야 합니다. 색상 변경하기 이미 적용한 색상을 바꾸려면 위의 방법과 동일하게 Fill 항목을 클릭해서 변경합니다. 새로운 색상을 선택하면 바로 적용됩니다. 색상 스타일 만들기 자주 쓰는 색은 Style로 지정할 수 있습니다. Fill > 우측 상단 + 버튼을 클릭해서 원하는 이름을 입력하고 색상을 저장합니다. 그러면 아래 이미지처럼 스타일로 색상이 저장된 걸 확인할 수 있습니다. 라이브러리에 추가된 게 보이시죠? 스타일로 지정한 색상은 그 색이 적용된 모든 오브젝트가 자동으로 업데이트됩니다. 예를 들면 "메인 버튼 색상"을 초록에서 파랑으로 변경한 경우 전체 버튼이 모두 변경됩니다. 이 외에도...

피그마에서 프레임을 처음 만들어보는 분들을 위한 기초 가이드를 작성해 보려고 합니다. 프레임의 개념부터 만드는 방법, 활용 팁까지 알아보겠습니다. 디자인 초보, 혹은 기획자들이 피그마를 처음 시작할 때 가장 많이 하는 질문 "프레임이 뭐예요?" 피그마의 프레임은 그냥 사각형이 아닙니다. 우리가 웹, 앱 디자인을 하면서 사용하는 캔버스의 기본이 되는 게 바로 프레임입니다. 위에서 언급했듯 피그마에서 프레임은 화면 , 섹션, 페이지의 뼈대입니다. 디자인을 담을 수 있는 컨테이너이자, 개발자가 구현할 디자인 영역을 정의하는 역할입니다. 예를 들어보겠습니다. '포토샵의 캔버스', 'PPT의 슬라이드', 'HTML의 div 태그' 자 그렇다면 프레임이 필요한 이유를 다시 정리해 보겠습니다. 1. 모바일/웹 UI를 실제 화면처럼 보여줄 수 있음 2. 반응형 디자인을 시뮬레이션 3. 다른 프레임과 비교와 정렬이 쉬움 4. 개발자 전달 시  export의 기준이 됨 프레임 만들어보기 자 간단하게 단축키 F, 혹은 하단에 격자 모양을 클릭해서 프레임을 추가해 주세요 자 그럼 프레임 위에 중첩 프레임(프레임 하나 더 그리기)을 해보겠습니다. 이건 복잡한 화면을 설계할 때 아주 유용하게 사용할 수 있는 기능입니다. 자 상단의 이미지는 아이패드 프로 11 크기에 아이폰 16 프로 맥스를 중첩한 상태입니다. 이런 형태로 활용할 수 있습니다. 또한 작업물을 확인하기 위해서 Layer에 생성된 항목 중 하나를 우클릭하여 Rename을 통해 이름을 변경할 수 있습니다. 프레임은 복사와 붙여넣기도 가능합니다. 그래서 상단 이미지를 보시면 아이패드가 2개 생성되어 있는걸 보실 수 있습니다. 피그마에서 프레임은 단순히 화면을 그리는 공간이 아닙니다. 전체 UI의 흐름을 계획하고, 깔끔하게 정리할 수 있게 도와주는 핵심 도구입니다. 오늘 배운 방법대로 차근차근 연습하면 복잡한 앱이나 웹 디자인도 프레임부터 깔끔하게 시작할 수 있습니다....