Figma

22. 기능심화

작성자:

피그마 기능심화 1. 카드UI 만들기 <li> 프레임을 두 개 그립니다. 하단 프레임은 Alt + 드래그 드랍으로 복제 후 크기를 줄입니다. </li> <li> 두 개의 프레임을 한번 더 프레임 그룹으로 묶습니다. </li> <li> 프레임의 이름을 그림처럼 변경합니다. </li> <li> 표시된 순서대로 체크하여 모서리를 둥글게 만듭니다. </li> 1-1. 프레임 VS 그룹 같은 작업을 그룹으로 해봅니다. 사각형을 그려서 … 더 읽기

20. 인터페이스예제

작성자:

피그마 인터페이스 예제 예제파일 다운로드: https://url.kr/5qeozf 1. 캔버스와 페이지 그리고 레이어 1-1. 캔버스 속성 설정 <li> 배경색 변경하기 </li> <li> 측정자 표시하기 우측 패널에서 설정: 좌측 패널 홈버튼에서 설정: </li> 2. 화면 명칭 좌측 패널 메인 메뉴 툴바 파일명 우측 패널 탭 버튼 3. 좌측 패널 3-1. 레이어 <li> 툴바에서 프레임(Frame) 클릭 </li> <li> 4:3 … 더 읽기

01. 피그마란

작성자:

피그마란? 피그마(Figma)는 클라우드 기반의 디자인 툴입니다. 협업 기능이 강화되어 있어 디자이너, 개발자, 프로젝트 매니저 등의 팀원들과 함께 작업할 때 효율적으로 작업을 진행할 수 있습니다. 또한, 디자인 시안을 실제 앱과 같은 환경에서 테스트할 수 있는 프로토타이핑(prototyping) 기능도 제공합니다. 공식사이트 피그마 공식사이트 프로토타입 툴 비교 프로그램 운영체제 설치 방식 XD win, mac 설치형 Sketch mac 설치형 Figma … 더 읽기

19. 작업환경세팅

작성자:

피그마 작업환경 세팅 1. 프로그램 설치 1-1. 온라인 회원가입 피그마(Figma) 공식사이트에서 회원가입을 합니다. 피그마 공식사이트 1-2. 로컬 프로그램 설치 피그마는 브라우저에서도 사용 가능하지만, 로컬 프로그램(데스크톱 앱)을 설치하면 더 안정적으로 사용할 수 있습니다. 1-3. 피그마 미러링 OS에 맞는 앱을 다운로드합니다. 피그마 다운로드 페이지 앱 설치 후 로그인 시 웹에서 로그인한 계정정보와 같아야 프로토타입 문서의 시뮬레이션이 됩니다. … 더 읽기

08. Contact

작성자:

07. Contact.jsx — EmailJS로 이메일 전송 이번 단계에서 할 일 Contact 폼에서 입력한 내용을 실제 이메일로 전송한다. EmailJS — 백엔드 서버 없이 프론트엔드에서 바로 이메일을 보내주는 서비스이다. 피그마 디자인 분석 │ ─── contacts ──────────────────────────────── │ │ │ │ Name │ │ ┌────────────────────────────────────────┐ │ │ │ Value │ │ 높이: 40px │ └────────────────────────────────────────┘ │ │ │ … 더 읽기

06. AboutMe

작성자:

05. AboutMe.jsx — 소개 섹션 이번 단계에서 할 일 학력, 자격사항, 인적사항을 보여주는 소개 섹션을 만듭니다. 재사용 컴포넌트를 만드는 방법을 배웁니다. 피그마 디자인 분석 │ ─── ABOUT ME ──────────────────────────────────── │ │ 끈기와 열정으로 성장하는 오성의입니다. │ │ │ │ ┌──────────────────────┬──────────────────────┐ │ │ │ 학력 및 교육사항 │ 인적사항 │ │ │ │ 22.10-22.10 | 수료 … 더 읽기

02. App

작성자:

01. App.jsx — 전체 레이아웃 조립 이번 단계에서 할 일 만들 컴포넌트들을 App.jsx 에 미리 배치합니다. 지금은 빈 껍데기만 만들고, 다음 단계에서 하나씩 채워나갑니다. App.jsx 역할 App.jsx ├── <Nav /> ← 네비게이션 ├── <Hero /> ← 히어로 섹션 ├── <main> │ ├── <AboutMe /> ← 소개 │ ├── <Projects /> ← 프로젝트 │ └── <Contact … 더 읽기

03. CSS

작성자:

02. index.css — 기본 스타일 설정 이번 단계에서 할 일 모든 컴포넌트에 공통으로 적용되는 기본 스타일을 작성합니다. 왜 초기화가 필요한가요? 브라우저(Chrome, Firefox, Edge 등)마다 기본 스타일이 조금씩 다릅니다. 예를 들어 <h1> 태그의 기본 크기나 여백이 브라우저마다 다를 수 있습니다. 이 프로젝트는 reset-css 라이브러리로 초기화를 합니다. npm install 시 이미 설치되어 있으며, @import 로 불러옵니다. npm … 더 읽기

10. 완성_정리

작성자:

09. 완성 및 오류 정리 최종 파일 목록 src/ ├── main.jsx ✅ 라우터 연결 ├── router.js ✅ 라우터 설정 ├── App.jsx ✅ 01단계 ├── index.css ✅ 각 단계에서 추가 └── components/ ├── SectionTitle.jsx ✅ 05단계 ├── Nav.jsx ✅ 03단계 ├── Hero.jsx ✅ 04단계 ├── AboutMe.jsx ✅ 05단계 ├── Projects.jsx ✅ 06단계 ├── Contact.jsx ✅ 07단계 … 더 읽기

05. Hero

작성자:

04. Hero.jsx — 히어로 섹션 이번 단계에서 할 일 페이지 상단의 인상적인 소개 영역(히어로 섹션)을 만듭니다. 피그마 디자인 분석 ┌──────────────────────────────────────────────────┐ │ │ │ Title ← 폰트 72px, 색상 #0c0c0d │ │ Subtitle ← 폰트 32px, 색상 #0c0c0d │ │ │ │ [Github] [Resume] │ │ ↑ 밝은버튼 ↑ 어두운버튼 │ │ #e3e3e3 #2c2c2c (흰 텍스트) … 더 읽기