반응형 공부하는생활67 노션 초보 기능 : 보드 열 배경색 음영 넣기, 노션 꾸미기, 보드 열 색깔 구분하기 노션에서 기본으로 제공하고 있는 기능 중 정말 자주 사용하는 보드에 컬러 넣기 기능! 생각보다 있는지도 모르는 사람들이 많아 공유하려고 한다. 사랑스러운 파스텔컬러로 보드별 음영을 채워주기 때문에 시각적으로 효과도 좋고, 깔끔해 보이는 장점이 있다. 노션 보드 컬러 넣기 보드에 컬러를 넣기 전과 넣은 후 사진을 보자. 내용을 동일하지만 음영으로 표시되어 있는 것만으로도 우리는 두 가지 효과를 가질 수 있다. ● 노션을 잘 다룰줄 알아보인다. ● 보드가 시각적으로 이쁘다. ● 보드의 각 열이 구분되어 보기 좋다. 이렇게 보드를 컬러별로 넣는 건 정말 쉬운데, 빠르게 방법을 알아보도록 하자. 3초면 끝이다! 보드 오른쪽 끝 더보기(쩜쩜쩜 버튼) > 레이아웃 > 열 배경색 토글 ON 열 배경색 토글을 ON으로.. 2024. 1. 24. 피그마 초보 기능 : Inspect 인스펙트 패널 안보일 때 설정하는 방법, 개발자에게 디자인 코드 전달하기 피그마는 기획자, 개발자, 디자이너가 협업하기 좋은 프로토타이핑툴로 서로 업무 공유와 내용을 실시간으로 공유할 수 있다. 특히나 피그마에서 디자인된 내용을 소스 코드로 변환하기 쉽도록 Inspctor 인스펙터 기능을 제공하는데, 오늘 이를 함께 알아보려고 한다. 인스펙트 패널 디자인을 소스 코드로 변환하기 쉽도록 정보를 제공하는 것으로, 아래의 화면 예시로 확인하면 쉽다. 피그마 플러그인 기능을 통해 삽입한 로그인 하단 유튜브 모양의 아이콘을 클릭하고 오른쪽 패널 Inspect를 선택하니, 레이아웃과 스타일을 한 번에 보여준다. 이러한 내용들은 피그마에서 자동으로 빠르게 확인 가능하도록 기능을 제공하며, 개발자에게 수월한 업무를 가능하게 도와준다. 인스펙트 패널 안보일때? 간혹 피그마를 처음 사용하는 분.. 2024. 1. 22. 피그마 초보 기능 : 쇼핑몰 상품 리스트 만들기, 프레임 컴포넌트, 그룹, 복사 붙여넣기 단축키 피그마 작업을 하다 보면 반복 작업을 빠르게 끝낼 수 있도록 기능을 제공한다. 하나의 프레임 영역에 있는 요소를 모아 그룹화하여 컴포넌트를 생성하면, 쉽게 복사 붙여 넣기로 똑같은 컴포넌트를 쉽게 생성할 수 있다. 반복 작업을 하는 경우 ms에서 많이 사용하는 ctrl+v와 같이 피그마에서도 사용 가능한 단축키까지 알아보자. STEP 1. 프레임 컴포넌트 생성 예시는 쇼핑몰 상품 리스트 처럼 구성을 해봤다. 프레임 그리기 > 안에 사각 그리기 > 사각 안에 이미지 넣기 > 상품 이름, 금액 등 텍스트 넣기 > 모든 요소 그룹화 > 프레임 선택 후 오른쪽 마우스 > Create component 선택 프레임은 먼저 그려도 괜찮고 나중에 그림, 텍스트 등 요소를 다 그리고 마지막에 그 위로 감싸서 그려도 상.. 2024. 1. 17. 피그마 초보 기능 : 플러그인 언스플래쉬 기능으로 이미지 넣기 목업 이미지 넣기, 쇼핑몰 상품 이미지 페이지 만들기 컴포넌트, 인스턴스 끊고 이미지 각각 넣기 피그마로 앱을 디자인할 때, 이미지를 넣어야 하는 경우가 많다. 실제 이미지가 아니더라도 UI 완성도를 높이기 위해 피그마에서 기본으로 제공하는 이미지를 넣어 보기 좋게 디자인할 수 있다. 오늘은 피그마에서 플러그인으로 제공하는 쉽고 빠르고 무료인 언스플래쉬를 통한 이미지 넣기를 함께 해보겠다. STEP 1. Frame 만들기 예시는 쇼핑몰 이미지와 같이 하나의 프레임 안에 이미지와 텍스트가 함께 있는 걸로 만들었다. 사진 속 왼쪽 예제와 동일하게 실전란에 만들어보도록 하자. 상단 툴 모음 > Frame 선택 > Frame 범위 그리기 ※이때, 프레임 범위는 이미지와 텍스트가 들어갈 만큼 크게 잡아주세요. STEP 2. 이미지 넣을 zone 만들기 이미지와 텍스트를 넣을 프레임을 만들었다면, 그 안쪽에 .. 2024. 1. 12. 이전 1 2 3 4 5 6 7 ··· 17 다음 반응형
