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

채팅 화면의 받은 메시지와 보낸 메시지를 구분하고 싶나요?사각형의 모서리를 각각 조절해 좌우 말풍선을 만들어 보겠습니다.1. 좌우 방향이 다른 말풍선을 만듭니다채팅 화면에서는 받은 메시지는 왼쪽, 보낸 메시지는 오른쪽으로 배치하곤 합니다. 사각형의 네 모서리를 따로 조절하면 꼬리 모양을 그리지 않고도 방향감을 줄 수 있습니다.이번에는 360 × 300px 채팅 화면에 흰색 받은 말풍선과 파란색 보낸 말풍선을 만듭니다. 완료 상태의 실습 파일을 참고할 수 있습니다. 파일에서 두 메시지 텍스트는 화면 프레임 바깥의 별도 레이어이므로 프레임을 내보내기 전에 안으로 옮겨 주세요. 예상 시간은 약 15분이며 편집 권한이 필요합니다. Independent corners는 모든 플랜에서 사용할 수 있습니다. Figm..

긴 제목 때문에 카드 아래쪽 정보가 밀리나요?제목의 너비와 최대 줄 수를 설정해 강의 카드를 깔끔하게 정리해 보겠습니다.1. 긴 강의 제목을 두 줄로 정리합니다강의 목록의 제목이 길면 아래 안내 문구를 밀거나 카드마다 높이가 달라 보일 수 있습니다. Truncate text와 Max lines를 이용하면 긴 텍스트를 정해진 줄 수에서 줄이고 말줄임표를 표시할 수 있습니다.320 × 280px 강의 카드 하나를 만들고 제목을 최대 두 줄로 제한합니다. 예상 시간은 약 20분입니다. 완료 상태의 피그마 실습 파일을 참고할 수 있습니다. 실습 파일의 제목과 보조 정보는 카드 바깥의 별도 레이어라 카드 프레임만 내보내면 빠집니다. 복사해 사용할 때에는 두 텍스트를 프레임 안으로 옮겨 주세요. 편집 권한이 필요하..

쿠폰에 자르는 선을 넣고 싶나요?선 하나의 Dash와 Gap을 바꿔 일정한 간격의 점선을 만들어 보겠습니다.1. 쿠폰에 들어갈 점선을 만듭니다쿠폰이나 영수증에서 잘라내는 위치를 나타낼 때 점선을 자주 사용합니다. 피그마에서는 여러 선 조각을 따로 그리지 않고 선 하나의 Dash와 Gap을 조절할 수 있습니다.이번에는 400 × 240px 바탕 위의 쿠폰에 304px 길이의 점선을 넣습니다. 완성 상태의 실습 파일도 참고할 수 있습니다. 실습 파일에서는 네 텍스트가 프레임 밖의 별도 레이어로 놓여 있으므로, 프레임만 이미지로 내보내려면 텍스트를 쿠폰 프레임 안으로 옮겨 주세요. 예상 시간은 약 15분이며 편집 권한이 필요합니다. 이 기능은 모든 플랜에서 사용할 수 있습니다. Figma 공식 도움말 2. 쿠..

Frame 1, Frame 2가 많아 원하는 카드를 찾기 어렵나요?여러 레이어에 연속 번호와 접두사를 붙여 알아보기 쉽게 정리해 보겠습니다.1. 카드 3개의 이름을 정리합니다카드가 늘어나면 Frame 1, Frame 2처럼 이름만 보고 대상을 찾기 어렵습니다. 이번에는 카드 프레임 세 개를 선택해 Card_01, Card_02, Card_03으로 바꾸고, 이어서 기존 이름 앞에 Lesson_을 붙입니다. 화면 디자인은 그대로 두고 레이어 이름만 정리하는 약 20분 실습입니다.완료 상태의 실습 파일을 참고하거나 빈 파일에서 시작하세요. 이 파일에는 이름을 바꾼 빈 프레임 세 개가 있습니다. 편집하려면 복사본과 편집 권한이 필요합니다. Rename layers는 모든 플랜에서 사용할 수 있습니다. 공식 도움..

학습률을 원형으로 보여주고 싶나요?피그마의 원 도형 하나로 진행률 링을 만들 수 있습니다. Arc를 조절해 75% 학습 카드를 만들고, 숫자와 도형이 맞는지 확인해보겠습니다.원형 진행률은 시작점·채움 비율·두께를 나눠 설정합니다. 이미지를 누르면 크게 볼 수 있습니다.1. 이번에는 75% 학습 카드를 만듭니다강의를 4개 중 3개 들었다면 학습률은 3 ÷ 4 × 100 = 75%입니다. 이를 원의 4분의 3만 채운 링으로 표현해보겠습니다. 피그마에서는 원을 그린 뒤 Arc를 조절하면 원호와 링을 만들 수 있습니다.완성할 카드는 320 × 320px입니다. 위에는 이번 주 학습률, 가운데에는 75%, 아래에는 목표 4강 중 3강 완료를 넣습니다. 예상 실습 시간은 약 20분입니다.완성 목표: 위쪽에서 시작해..

배지와 제목, 버튼 색상을 하나씩 고치고 있나요?피그마의 Selection colors를 사용하면 선택한 디자인 안의 같은 색상을 모아 수정할 수 있습니다. 카드 두 개로 직접 따라 해보겠습니다.1. 색상을 바꿔볼 카드 2개 준비하기카드의 배지와 제목, 버튼이 모두 같은 파란색이라면 각각 선택해서 고칠 필요가 없습니다. Selection colors에서 선택한 디자인 안의 색상을 모아 확인하고 바꿀 수 있습니다.이번에는 #2563EB → #7C3AED로 강조색을 변경하겠습니다. 먼저 왼쪽 카드만 수정하고, 이어서 두 카드의 강조색을 맞춰보세요. 예상 실습 시간은 약 20분입니다.실습 시작 파일을 자신의 초안에 복사해 사용하면 같은 화면으로 따라 할 수 있습니다. 직접 만들고 싶다면 아래 값으로 준비하세요..

같은 문구를 화면마다 하나씩 고치고 있나요?피그마의 찾기·바꾸기를 사용하면 반복된 서비스명을 모아서 수정할 수 있습니다. 이번에는 화면 3개의 이름을 바꾼 뒤 버튼 하나만 따로 고쳐보겠습니다.1. 실습할 화면 3개 준비하기서비스 이름이 바뀌면 홈 화면뿐 아니라 예약 화면과 완료 화면에도 같은 수정이 필요합니다. 이번에는 모닝예약 → 하루예약으로 이름을 바꾼 다음, 완료 화면의 버튼 하나만 따로 수정해보겠습니다.예제는 같은 페이지에 놓인 360 × 480px 프레임 3개입니다. 직접 그리기보다 준비된 예제로 시작하고 싶다면 연습용 시작 파일을 사용하세요. 원본은 그대로 두고 자신의 초안에 복사해 연습하면 됩니다. 예상 실습 시간은 약 20분입니다.항목설정프레임360 × 480px, 같은 페이지에 3개배경#..

IT-ABILITY · 제안서 입문 04정량 제안서는 숫자를 많이 적는 문서가 아니다. 공고가 평가하겠다고 지정한 항목에 대해 인정 가능한 자료를 제출하는 일에 가깝다. 처음에는 회사 소개 자료부터 모으기보다 평가표와 증빙 서식을 나란히 펼쳐야 한다.이번 글의 목표가상의 사내 업무 시스템 구축 사업을 예로 들어 정량 항목별 증빙 목록을 만들고, 본문·서식·발급 자료가 서로 맞는지 확인한다. 실제 제출 조건은 해당 공고를 따른다.1. 정량평가는 무엇을 확인할까?조달청 세부기준은 사업에 따라 정량평가 항목으로 경영상태, 수행실적 등을 제시한다. 하지만 모든 사업에서 모든 항목을 평가하는 것은 아니다. 예를 들어 수행실적은 공고 여부와 계약 성격에 따라 제외될 수 있으므로, 먼저 해당 제안요청서의 평가표를 확..

IT-ABILITY · 제안서 입문 03정성 제안서를 처음 쓰면 “최선을 다하겠습니다” 같은 문장부터 떠오를 수 있다. 평가자가 확인하기 쉬운 제안은 의지보다 어떤 요구를, 누가, 어떤 순서로 수행하고, 무엇으로 확인할지를 보여준다.이번 글의 목표제안요청서의 한 요구사항을 수행계획 문단으로 바꿔본다. 예시는 가상의 사내 업무 시스템 구축 사업이며, 실제 평가 기준이나 확정된 수행 약속이 아니다.1. 정성 제안서에서 무엇을 설명해야 할까?정성 제안은 회사 소개를 길게 나열하는 자료가 아니다. 발주기관의 문제를 이해하고, 제안한 방법이 그 문제를 해결할 수 있는지 설명하는 자료다. 조달청 기준은 정성평가 항목을 소프트웨어 개발, 유지관리 등 사업 유형별 별표로 구분한다. 따라서 구체적인 목차는 해당 제안요청..

IT-ABILITY · 제안서 입문 02처음 받은 제안요청서가 길고 낯설다면 첫 장부터 모두 외우려고 하지 않아도 된다. 먼저 “무엇을 만들어야 하는가”, “무엇으로 평가받는가”, “무엇을 언제 제출하는가”를 찾아 표시하면 제안서 작업의 순서가 보인다.이번 글의 목표공고문과 제안요청서(RFP)를 읽고, 작성 전에 확인할 내용을 평가·요구사항·제출 목록으로 옮긴다. 아래 사례는 가상의 사내 업무 시스템 구축 사업이다.1. 제안요청서와 입찰공고는 어떤 문서일까?제안요청서는 발주기관이 입찰 참가자에게 사업 내용과 제안서 작성 기준을 알려주는 문서다. 재정경제부 계약예규는 제안요청서에 과업내용, 요구사항, 계약조건, 평가요소와 평가방법, 제안서 규격 등을 명시하도록 한다. 협상에 의한 계약체결기준 제5조에서 확..