트랜드신

폰트를 아직도 유료폰트를 사용하시나요?

메시지를 효과적으로 전달 하기 위해 반드시 필요한 폰트.

프리텐다드 무료폰트 다운받아서 작업해 보세요

프리텐다드 외에도 무료폰트 사이트에서 아래의 방법으로 설치하시면 되세요

프리텐다드 무료 폰트 다운로드

  Pretendard 무료폰트 다운로드

1. 검색창에서 "프리텐다드" 입력하세요

2. 페이지 좌측에 글꼴 다운로드

3. 다운로드 폴더에서 다운받은 파일을 확인합니다.

    9개의 설치폰트가 보이시죠?

\Downloads\Pretendard-1.3.9\public\static

4. 글꼴 설치하기 - 설치하는 방법은 2가지 입니다.

    각 폰트를 더블클릭해서 하나씩 설치하는 방법 총 9번 설치 필요

내 컴퓨터의 시작>개인설정 > 글꼴을 열어서 글꼴 한번에 설치하기

아래 표기된 위치에 9개의 글꼴을 끌어서 놓으면 설치 완료!

5. 설치 완료된 글꼴 확인하기

저는 피그마에서 글꼴이 필요해서 설치하였습니다.

피그마에 Fonts에 설치된 폰트가 보이시죠? 방금 설치해서 new 태그가 붙어 있습니다.

글꼴 다운받아서 설치하기 너무 간편하시죠?

프리텐다드 글꼴 외에도 피그마에서 사용하기 좋은 무료 한글 폰트 알려드려요.

1. 나눔폰트 (나눔스퀘어, 나눔고딕, 나눔명조 등)

• 깔끔하고 직관적인 디자인으로 웹, 앱 디자인에 널리 사용
• 📎 다운로드: https://hangeul.naver.com/font
• ✔️ 네이버에서 무료 배포, 상업적 사용 가능

2. Pretendard (프리텐다드)

• 산세리프 스타일로 현대적이고 깔끔한 UI/UX 디자인에 최적
• 📎 GitHub: https://github.com/orioncactus/pretendard
• ✔️ 웹/앱 디자인에 최적화된 깔끔한 산세리프 폰트

3. 배민체 시리즈 (도현체, 연성체 등)

• 캐릭터가 있는 감성적인 스타일, 포스터/이벤트용에 적합
• 📎 다운로드 페이지: https://www.woowahan.com/fonts
• ✔️ 감성적인 스타일, 자유롭게 사용 가능

4. 에스코어 드림 (S-Core Dream)

• 다양한 굵기 제공 → 타이포그래피 활용에 매우 유리
• 📎 다운로드: https://www.score.co.kr/font/font.do
• ✔️ 다양한 굵기와 세련된 디자인

5. 서울서체 (서울한강체, 남산체 등)

• 공공 디자인, 안내 텍스트 등에도 사용 가능
• 📎 다운로드: https://www.seoul.go.kr/seoul/font.do
• ✔️ 공공용으로도 자유롭게 사용 가능

웹기획자 15년차 피그마 툴을 사용해 보지 않았지만 

이제는 피그마를 사용하지 않으면 일이 끊길 수 있는 2025년이 되었네요

웹기획 15년  IT의 많은 변화들 중에 이정도의 변화는 잔잔한 바람이죠

남들 보다 많이 늦은 피그마 너 도대체 뭐인지 한번 알아 보도록 하겠습니다.

제가 들은 피그마에 대한 썰!!

디자인 할때 포토샵보다 편하게 사용할 수 있어

포토샵과 PPT의 중간 버전이야

기획자가 디자인 급하게 필요할때 피그마를 많이 쓴대
스토리보드나 UX설계도 피그마로 하면 너무 편해

이 많은 말들이 피그마를 조금 알고 나서는 긍정회로가 돌아가기 시작했습니다.

피그마 이거 물건이네!!

웹기획자는 보통 대부분을 PPT작업에 시간을 많이 소요합니다.

PPT 문서로 와이어프레임도 만들고, 제안서, 스토리보드, UX등

모든 커뮤니케이션을

PPT로 작성하여 업무를 진행 합니다.

보통은 PPT로 문서를 작성해서 컨펌 보내면 수정사항을 받아서

다시 수정하느라 라인 도형 간격등을 한땀한땀 수 작업이 필요합니다.

어떤 날은 탭을 5개로 늘렸다가 3개로 줄이고 다시 늘렸다가 줄이고

이런 노가다성 수정 작업도 많은게 웹기획자의 현실인대요 

그렇다면 피그마는 PPT보다 쉽고 빠르게 작업 할 수 있는가?

YES

피그마 넌 어떤 강점이 있는거야?

이제는 피그마 하나로 UX기획, 와이어프레임, 프로토타이핑, 현업과의 커뮤니케이션 까지 해결 가능!

1. 와이어프레임 & UX 기획을 쉽게 제작 가능

• 피그마는 빠르게 와이어프레임을 제작할 수 있는 툴이에요.
• 드래그앤드롭 방식으로 손쉽게 화면 레이아웃을 구성할 수 있어요.
  피그마의 오토 레이아웃, 컴포넌트 기능을 활용하여 쉽게 수정 가능
• 다양한 플러그인을 활용할 수 있어 기본 구성 요소를 빠르게 배치하고 작업 할수 있어요
  (예: Wireframe, unsplash, iconify, graph generator, 한들 더미, Design DOC, Autoflow, Figmap 등등)
• 활용 예시
  홈페이지 메인화면 레아아웃 구성, 회원가입, 로그인 페이지 설계, 대시보드 UI 구조 정리
  새로운 페이지 기획시 기존 컴포넌트를 불러와 빠르게 구성
  다양한 디바이스에서 일관된 UI 유지

2. 디자인, 개발 팀과 실시간 협업 가능

• • 실시간 공동 작업이 가능해서 디자이너, 개발자와 빠르게 피드백을 주고받을 수 있어요.
  • 기존의 PPT, Excel 같은 문서보다 직관적인 화면 기획이 가능해요.
  • 히스토리 관리가 자동으로 되어 버전 관리 걱정이 없음
    
  • 활용 예시
    클릭 가능한 메뉴 버튼과 페이지 이동 구현에 대한 정의
    마우스 오버, 드롭다운 메뉴의 인터랙션 추가
    버튼, 폼 입력창 등 UI 요소의 크기, 간격, 생상 정의
    
    
    

3. 프로토타이핑으로 화면 흐름을 테스트할 수 있음

• 클릭, 슬라이드 등 기본적인 인터랙션을 설정할 수 있어요.
• 실제 앱/웹처럼 동작하는 프로토타입을 만들어 클라이언트나 팀원에게 공유할 수 있어요.
• 개발 전에 **사용성 테스트(UX 테스트)**를 진행할 수 있어 기획 수정이 용이함.
• 활용 예시
  화면에서 특정 버튼 클릭시 화면 이동하는 경로 시뮬레이션
  결제 프로세스 (장바구니 → 결제페이지 → 주문 완료) 플로우 설계

4. 디자인 가이드 작성 및 전달이 쉬움

• 개발자를 위한 **스타일 가이드(Spec)**를 피그마에서 바로 확인 가능해요.
• 색상 코드, 폰트, 여백 값 등을 명확하게 정의해서 개발자가 혼동하지 않도록 정리할 수 있어요.
• 컴포넌트 기능을 활용하면 디자인 시스템 구축도 가능.
• 활용 예시
  모바일, 태블릿, 테스크톱별 반응형 디자인 가이드 제공
  폰트, 아이콘, 이미지 등으 사용 규칙 정의
  브랜드 컬러, 버튼 스타일, 폰트 설정을 한곳에서 관리
  

5. 다양한 플러그인 및 위젯 활용 가능

• 아이콘(Feather Icons, Material Icons), 이미지(Unsplash, Pexels), 더미 텍스트(Lorem Ipsum) 등
• UX 리서치, 사용자 흐름도, 마인드맵 등을 쉽게 만들 수 있는 FigJam도 유용함.
  
  

💡 결론: 웹기획자가 피그마를 잘 다루면?

✅ 기획 → 디자인 → 개발 협업이 매끄러워짐
✅ 와이어프레임, UX 플로우, 프로토타입 제작이 빠르고 정확해짐
✅ 개발 전 UX 문제를 미리 발견해서 수정 가능

웹기획자의 필수 툴 피그마!

피그마 많이 들어보셨죠?

현재 실무에서 많이 사용하고 있는 프로젝트도 있을테고

이제는 써야지 하는 프로젝트도 있을듯 합니다.

저는 웹기획 15년차 이고 4년전에 프로젝트내에서 피그마 사용을 하자는 이슈가 있었지만

컨펌라인에서 피그마 사용이 불필요하다고 해서 기획에서는 사용하지 않고

디자인파트에만 사용을 했었어요

그때만 해도 피그마 2~#년 뒤에는 없어질것 같은 툴이였는데

25년 지금은 필수 기획자 툴이 되는 현실입니다.

이제는 피그마를 디자인처럼 사용해야 할 때

현재 피그마를 시작하는 여러분을 위해 정보를 정리해 볼까 합니다.

(저도 웹기획 15년차 이지만 지금부터 피그마 공부를 시작하는 중입니다.)

오늘 부터는 단축키에 대한 정보를 공유합니다. 

(자주 사용하는 건 컬러 표기 했으니 참고해 주세요)

🔹 기본 조작 단추키

• Ctrl + D → 복제 (Duplicate)
• Ctrl + Alt + D → 옵션정보 복제 
• Ctrl + Z → 실행 취소 (Undo)
• Ctrl + Shift + Z → 다시 실행 (Redo)
• Ctrl + G → 그룹 만들기 (Group) 
• Ctrl + Shift + G → 그룹 해제 (Ungroup)
• Alt + 드래그 → 요소 복사 이동
• Shift + G  →  그리드 보이기
• Ctrl + Shift + K → 이미지 삽입
• Ctrl + L → 잠금 (Lock)
• Ctrl + Shift + L → 잠금 해제 (Unlock)
• Ctrl + / → 퀵 액션 실행 (빠른 명령어 검색)

🔹 레이어 & 정렬

• Ctrl + ] → 앞으로 이동 (Bring Forward)
• Ctrl + [ → 뒤로 이동 (Send Backward)
• Ctrl + Shift + ] → 맨 앞으로 이동 (Bring to Front)
• Ctrl + Shift + [ → 맨 뒤로 이동 (Send to Back)
• Ctrl + Alt + H → 수평 정렬 (Align Horizontal)
• Ctrl + Alt + V → 수직 정렬 (Align Vertical)

🔹 오토 레이아웃 & 컴포넌트

• Shift + A → 오토 레이아웃 적용/해제
• Ctrl + Alt + K → 컴포넌트로 만들기 (Create Component)
• Ctrl + Shift + B → 마스터 컴포넌트 찾기
• Ctrl + Alt + Shift + B → 인스턴스 재설정 (Reset Instance)

🔹 텍스트 & 스타일

• T → 텍스트 입력 (Text)
• Ctrl + B → 볼드 (Bold)
• Ctrl + I → 이탤릭 (Italic)
• Ctrl + U → 밑줄 (Underline)
• Shift + Enter → 줄 바꿈 (Soft Return)
• Alt + 숫자(0~9) → 투명도 조절 (10~100%)

🔹 프로토타이핑 & 미리보기

• Shift + R → 눈금자 (Ruler) 보이기/숨기기
• P → 프로토타입 연결 (Prototype)
• Ctrl + Shift + E → 내보내기 (Export)
• Ctrl + Shift + \ → 오버레이 토글 (Prototype Preview)

🔹 캔버스 탐색

• Space + 드래그 → 캔버스 이동 (Hand Tool)
• Ctrl + 0 → 전체 보기 (Fit to Screen)
• Ctrl + 1 → 실제 크기 보기 (100% Zoom)
• Ctrl + 2 → 선택한 객체로 확대 (Zoom to Selection)

💡 TIP!

• Ctrl + /를 누르면 모든 단축키를 검색할 수 있어요!
  
  실무에서는 복제(D), 그룹(G), 정렬(A), 오토 레이아웃(Shift + A) 같은 단축키를 자주 쓰니까 먼저 익혀보세요.