RaphaelAhnBloggg

  디자인하다 보면 자연스럽게 "어떤 색상을 쓸까?", "이미 적용한 색을 바꾸려면 어떻게 할까?" 이런 고민을 하게 됩니다. 특히 피그마는 웹 기반이기 때문에 버튼, 텍스트 ,배경 등 모든 요소에 색을 자유롭게 적용할 수 있기 떄문에 고민이 더 깊어질 수 있습니다. 그래서 일단은 피그마에서 색상을 선택하고 변경하는 방법에 대해서 알아볼 예정입니다. 색상 선택 방법 피그마에서 색상을 선택하는 기본 방법은 아주 간단합니다. 오브젝트를 먼저 선택해 주세요 색상을 바꾸고 싶은 도형, 텍스트, 아이콘 등이 있겠죠 오브젝트를 선택한 후에 오른쪽 속성 패널에서 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의 흐름을 계획하고, 깔끔하게 정리할 수 있게 도와주는 핵심 도구입니다. 오늘 배운 방법대로 차근차근 연습하면 복잡한 앱이나 웹 디자인도 프레임부터 깔끔하게 시작할 수 있습니다....