AMoon - 개발자의 각종 개발 정보 공유

메뉴 항목 사이에 가느다란 구분선이 필요할 때가 있습니다.이번에는 별도 선 도형을 그리지 않고, 사각형의 아래쪽 Stroke만 사용해 메뉴 세 줄을 완성합니다.1. 만들 결과와 준비설정 메뉴에 항목이 여러 개 있으면 어디서 한 항목이 끝나는지 헷갈릴 수 있습니다. 이번에는 각 행의 아래쪽에만 선을 넣어 세 줄짜리 메뉴를 구분해 보겠습니다.각 행은 320×64px 흰색 사각형입니다. 구분선은 #CBD5E1, 1px, Bottom으로 설정합니다. 편집 권한이 있는 Figma 디자인 파일에서 시작하세요.2. 첫 번째 메뉴 행 만들기흰색 사각형과 문구 추가사각형 도구로 도형을 그린 다음 오른쪽 패널에서 W 320, H 64, Fill은 #FFFFFF로 설정합니다. 레이어 이름을 Menu row로 바꿉니다. 편집..

흰 카드가 배경에 묻힌다면 얇은 테두리 하나로 구분할 수 있습니다.이번에는 Stroke 색상과 두께, 위치를 설정해 프로필 카드 하나를 완성합니다.1. 완성할 프로필 카드와 준비물흰 카드의 경계가 배경에 묻히나요? 테두리(Stroke)는 도형의 경로를 따라 선을 표시하는 속성입니다. 흰 카드에 보라색 선을 더해 구분해 보겠습니다. 편집 권한이 있는 Figma 디자인 파일을 열어 주세요.완성할 카드는 가로 360, 세로 144px, 모서리 반경 20px입니다. 흰색 카드, 연보라 원형 아바타, 이름과 소개 문구로 구성합니다.2. 카드와 프로필 요소 만들기흰색 카드 만들기사각형 도구로 도형을 그린 뒤 오른쪽 패널에서 W 360, H 144, 모서리 반경 20, Fill #FFFFFF를 입력합니다. 레이어 이..

안녕하세요! AMoon 입니다.이번 포스팅은 [ 한글(HWP) 쪽번호를 특정 페이지부터 1로 시작하는 방법 ] 입니다. : )보고서를 다 쓰고 쪽번호를 넣으면 표지에도 1이 찍힌다.처음엔 "쪽 번호 매기기에서 시작 번호만 바꾸면 되겠지" 하고 생각했다. 그런데 해보면 표지와 목차에도 번호가 그대로 남는다.결국 이 작업은 번호를 다시 세는 일과 번호를 안 보이게 하는 일, 두 가지로 나눠서 해야 한다.이 글에서는 표지 1쪽, 목차 1쪽, 본문 3쪽짜리 보고서를 예로 들어 본문 첫 쪽을 '1'로 만드는 과정을 순서대로 따라 해본다.이 글의 기준한컴오피스 한글 2014에서 직접 따라 하며 캡처했다. 메뉴 이름과 단축키는 다른 버전에서도 거의 같지만, 대화상자 모양은 조금 다를 수 있다.이 글의 핵심쪽번호는 문..

이번에 만들 것검색 입력창 안쪽에 부드러운 그림자를 더해 살짝 들어간 듯한 모습을 만듭니다.검색창이 배경과 밋밋하게 붙어 보일 때, 안쪽 가장자리에 그림자를 넣으면 살짝 패인 느낌을 줄 수 있어요.이번에는 Inner shadow로 검색 입력창을 만들어 볼게요. 편집 권한이 있는 Figma Design 파일을 준비해 주세요. 이 효과는 모든 플랜에서 사용 가능하며, 설정은 Figma 공식 효과 도움말에서 확인할 수 있어요.1. 검색창 바탕 만들기Rectangle 도구로 입력창 바탕을 만들고 크기를 360×64, Fill을 #F1F5F9, Corner radius를 12로 지정합니다.2. Inner shadow 추가하기입력창 사각형을 선택한 상태에서 오른쪽 Effects의 +를 클릭합니다. 효과 종류에서 I..

이번에 만들 것밝은 배경 위에 흰색 상품 카드를 놓고 Drop shadow로 부드러운 깊이감을 더합니다. 흰 카드가 밝은 배경과 섞여 보일 때가 있죠. 그림자를 더하면 테두리를 굵게 긋지 않아도 카드와 배경을 구분할 수 있어요.편집 권한이 있는 Figma Design 파일을 준비해 주세요. Figma 공식 효과 도움말에서 Drop shadow의 설정을 확인할 수 있습니다.1. 배경과 카드 만들기Rectangle 도구로 600×400 사각형을 만들고 Fill을 #E2E8F0으로 바꿉니다. 그 위에 280×180 사각형을 만들고 Fill #FFFFFF, Corner radius 16으로 지정해 카드 바탕을 만듭니다.2. 카드에 Drop shadow 추가하기흰색 카드 사각형만 선택하고 오른쪽 Effects의 ..

이번에 만들 것사진 레이어 하나에 이미지 Fill과 반투명 보라색 Fill을 쌓아 브랜드 컬러를 입힙니다. 사진마다 색이 달라 디자인이 제각각 보일 때가 있어요. 사진 위에 같은 브랜드 컬러를 살짝 입히면 분위기를 맞추는 데 도움이 됩니다.이번에는 사진을 덮는 사각형을 따로 만들지 않고 하나의 레이어에 Fill을 두 개 쌓습니다. 편집 권한이 있는 Figma Design 파일과 연습용 사진을 준비해 주세요. Figma 공식 Fill 도움말1. 사진 레이어 준비하기사진을 캔버스에 넣고 선택합니다. 연습 예제는 W 600, H 300이며 Fill에 이미지가 들어 있습니다. 원본을 남기고 싶다면 사진 레이어를 복제한 후 복제본을 선택하세요. 2. 색상 Fill 추가하기사진 레이어가 선택된 상태에서 오른쪽 ..

이번에 만들 것사진 위에 검은 사각형을 올리고 Fill 불투명도를 조절해 흰 글자가 읽히는 반투명 자막 바를 만듭니다.실습에 사용할 AI 생성 풍경 이미지입니다. 사진 위에 글자를 바로 올리면 밝은 부분과 겹쳐 읽기 어려울 때가 있어요. 검은색 자막 바의 불투명도를 낮추면 사진을 비치게 하면서 글자 뒤를 어둡게 만들 수 있습니다.편집 권한이 있는 Figma Design 파일을 준비해 주세요. Figma 공식 Fill 도움말에 따르면 색상 옆 퍼센트에서 채우기 불투명도를 바꿀 수 있습니다.1. 사진 준비하기Figma 파일에서 Ctrl+Shift+K(Windows) 또는 Command+Shift+K(Mac)로 연습용 사진을 선택하고 캔버스를 클릭해 배치한 뒤 W 600, H 300으로 맞춥니다. 이 글의 풍..

이번에 만들 것가운데에서 바깥쪽으로 색이 퍼지는 원형 그라데이션을 적용해 프로모션 배경을 만들어 봅니다. 중앙에 시선을 모으고 싶은 배경에는 원형 그라데이션이 잘 어울려요. 선형 그라데이션이 직선 방향으로 색을 바꾼다면, Radial gradient는 중심에서 바깥쪽으로 색을 바꿉니다.편집 권한이 있는 Figma Design 파일을 준비해 주세요. 모든 플랜에서 사용할 수 있습니다. Figma 공식 그라데이션 도움말1. 배경 사각형 만들기빈 캔버스에서 Rectangle 도구를 선택해 사각형을 만들고 오른쪽 Layout에서 W 600, H 300으로 입력합니다. 이 사각형을 선택한 채 다음 단계로 넘어갑니다. 2. 원형 그라데이션 적용하기사각형을 선택하고 오른쪽 Fill 색상 칸을 클릭합니다. 색상 선택 ..

이번에 만들 것사각형에 보라색과 파란색이 자연스럽게 이어지는 선형 그라데이션을 적용해 이벤트 배너를 만듭니다.단색 배경이 조금 밋밋하다면 두 색이 서서히 바뀌는 그라데이션을 적용해 보세요. Linear gradient는 색이 직선 방향으로 부드럽게 이어지는 채우기입니다.편집 권한이 있는 Figma Design 파일을 준비해 주세요. 이 기능은 모든 플랜에서 사용할 수 있습니다. Figma 공식 그라데이션 도움말1. 배너 바탕 만들기빈 캔버스에서 Rectangle 도구를 선택해 사각형을 그린 뒤 오른쪽 Layout에서 W 600, H 300으로 입력합니다. 사각형을 선택한 상태를 유지해 주세요. 2. 선형 그라데이션 적용하기사각형이 선택된 상태에서 오른쪽 Fill 색상 칸을 클릭해 색상 선택 창을 엽니다...

이번에 만들 것직선 세 개로 만든 반쪽 잎을 복제하고 Flip horizontal로 뒤집어 좌우 대칭 아이콘을 만듭니다.양쪽이 같은 아이콘을 만들 때 반쪽을 그린 뒤 복제하면 모양을 따로 다시 그릴 필요가 없어요. 피그마의 좌우 반전은 선택한 레이어를 거울처럼 뒤집는 기능입니다.편집 권한이 있는 Figma Design 파일을 준비해 주세요. Figma 공식 반전 도움말1. 반쪽 잎 만들기빈 캔버스에서 P를 눌러 Pen 도구를 선택합니다. 위쪽 점을 찍고, 그 점을 기준으로 왼쪽 80px·아래 80px 지점에 두 번째 점을 찍습니다. 세 번째 점은 첫 점의 바로 아래 160px 지점에 찍고, 처음 점을 다시 클릭해 닫습니다. 오른쪽 변이 수직인 삼각형 형태가 반쪽 잎이에요. 좌표가 정확하지 않다면 크기를 ..