Studio NFP

스튜디오 NFP


디자인 및 웹 작업을 위한 전문 도구 모음

NFP 디자인 어시스턴트 모바일에서 더 편리하게
QR 생성기
컬러 조합기
컬러 팔레트
컬러 추출기
디자인 계산기
디자인 가이드

QR 코드 생성기

URL, 텍스트, 연락처 정보를 입력하시면 QR코드를 생성해 드립니다.

생성된 QR 코드

컬러 조합기

원하는 색상을 직접 선택하거나 색상코드를 입력하면
선택한 색상을 바탕으로 어울리는 색조합을 자동으로 만들어드립니다.
결과 카드를 탭하면 클립보드에 색상코드가 복사됩니다.

베이스 컬러
1
255
117

컬러 팔레트

오늘은 무슨 컬러가 좋을까요?
5색 팔레트, 2색,3색 그라디언트를 랜덤으로 생성해드립니다.
카드 뽑기와 랜덤 팔레트로 영감을 얻어보세요.

단색 카드
그라데이션 카드
5색 조합 팔레트
5색 랜덤 팔레트
2색 그라디언트
3색 그라디언트

컬러 카드 뽑기

클릭하여 오늘의 컬러를 확인해보세요!

그라데이션 카드 뽑기

클릭하여 오늘의 그라데이션을 확인해보세요!

이미지 컬러 추출기

이미지를 업로드하시면 5개의 주요 컬러를 추출해서
비중을 퍼센트로 나타내어 팔레트를 생성해드립니다.

이미지 업로드

클릭하거나 파일을 드래그하여 업로드하세요

디자인 계산기

웹과 인쇄, 각종 디자인에 필요한 그리드, 폰트, 사이즈 계산부터
단위 변환까지 복잡한 수치 작업을 간편하게 해결하세요.

그리드 계산기
폰트 계산기
사이즈 계산기
단위 변환기
px
px
px
페이지 너비 800px
컬럼 너비 175px
간격 20px
좌우 마진 20px
픽셀
포인트

미리보기

이 텍스트는 16px(12pt) 크기입니다

반응형 사이즈

모바일 14.0px
태블릿 16.0px
데스크톱 18.0px

권장 사이즈

본문 웹: 16px 인쇄: 12pt
소제목 웹: 20px 인쇄: 15pt
제목 웹: 24px 인쇄: 18pt
대제목 웹: 32px 인쇄: 24pt
캡션 웹: 14px 인쇄: 10pt

비율 계산기

비율을 입력하면 다양한 해상도를 자동으로 계산해드립니다.

비율
비율
초고화질(4K) 3840×2160
고화질(Full HD) 1920×1080
표준화질(HD) 1280×720
일반화질(SD) 854×480

커스텀 사이즈 변환

원본 이미지를 원하는 비율로 변환합니다. 잘라내기와 늘리기 두 가지 방식으로 결과를 제공합니다.

px
px
비율
비율
잘라내기 (작게) -
늘리기 (크게) -

단위 변환기

다양한 길이 단위를 상호 변환합니다.

px
mm

디자인 가이드

디자인 작업에 필요한 모든 표준 사이즈와 가이드라인을 한 곳에서 확인하세요.

플랫폼 사이즈
컬러 가이드
타이포그래피
레이아웃 & 그리드
UI 요소
브랜딩

소셜 미디어

인스타그램 포스트 1080 x 1080px 1:1 비율
인스타그램 스토리 1080 x 1920px 9:16 비율
인스타그램 세로형 1080 x 1350px 4:5 비율
페이스북 커버 820 x 312px 페이지 커버
페이스북 포스트 1200 x 630px 링크 미리보기
유튜브 썸네일 1280 x 720px 16:9 비율
틱톡 동영상 1080 x 1920px 9:16 비율
링크드인 커버 1584 x 396px 4:1 비율

웹사이트

데스크톱 1920 x 1080px Full HD
모바일 배너 375 x 200px iPhone 기준
OG(소셜공유) 이미지 1200 x 630px 소셜 공유
파비콘 32 x 32px 브라우저 탭
PWA(웹 앱) 아이콘 512 x 512px 앱 아이콘
배너 광고 728 x 90px 리더보드

인쇄물

A4 용지 210 x 297mm 국제 표준
명함 90 x 54mm 한국 표준
A3 포스터 297 x 420mm 중형 포스터
현수막 1000 x 700mm 표준 현수막
엽서 (A6) 105 x 148mm A6 크기
브로셔 84 x 119mm 접이식
엑스배너 600 x 1800mm 스탠드 배너

브랜드 컬러 시스템

메인 컬러 60% 비중 브랜드 주색상
서브 컬러 30% 비중 보조 색상
액센트 컬러 10% 비중 강조 색상

색상 대비 기준

일반 텍스트 4.5:1 이상 웹 접근성 표준
대형 텍스트 3:1 이상 18pt 이상
AAA 등급 7:1 이상 최고 접근성

컬러 심리학

빨강 (#FF0000) 열정, 에너지 액션, 긴급성
파랑 (#0066FF) 신뢰, 안정 비즈니스, 의료
녹색 (#00CC66) 자연, 성장 환경, 건강
주황 (#FF6600) 창의, 친근 엔터테인먼트
보라 (#9966FF) 고급, 신비 럭셔리, 뷰티

폰트 크기 시스템

캡션 12px 작은 설명
작은 텍스트 14px 부가 정보
본문 16px 기본 텍스트
큰 본문 18px 읽기 편한 크기
소제목 24px 섹션 제목
제목 32px 페이지 제목
대제목 48px 히어로 타이틀

행간 (Line Height)

제목용 1.2배 헤딩 텍스트
일반용 1.4배 UI 텍스트
본문용 1.6배 긴 글 읽기

폰트 조합 추천

Pretendard + Noto Serif 한글 최적화 Sans + Serif
Inter + Playfair 모던 & 클래식 영문 조합
Roboto + Lora 구글 폰트 무료 조합

여백 시스템 (8px 배수)

최소 여백 8px 요소 간 최소 간격
기본 여백 16px 일반적인 간격
중간 여백 24px 섹션 내 간격
큰 여백 32px 컴포넌트 간격
섹션 여백 48px 섹션 간 간격
페이지 여백 64px 페이지 상하 간격

그리드 시스템

12 컬럼 Bootstrap 표준 웹 기본
16 컬럼 Material Design 구글 표준
24 컬럼 복잡한 레이아웃 세밀한 조정

황금비율 & 비율

황금비율 1:1.618 완벽한 조화
와이드 스크린 16:9 동영상, 모니터
클래식 4:3 전통적 비율
정사각형 1:1 SNS 포스트

아이콘 크기

작은 아이콘 16px 인라인, 텍스트 옆
기본 아이콘 24px 버튼, 메뉴
큰 아이콘 32px 헤더, 중요 액션
초대형 아이콘 48px 히어로, 피처

버튼 크기

작은 버튼 32px 높이 보조 액션
기본 버튼 40px 높이 일반 액션
큰 버튼 48px 높이 주요 액션
초대형 버튼 56px 높이 CTA 버튼

터치 영역 (모바일)

최소 터치 영역 44px × 44px Apple 권장
구글 권장 가이드 48px × 48px Material Design
터치 간격 8px 이상 요소 간 최소 간격

로고 가이드라인

최소 크기 24px 높이 가독성 확보
세이프 존 로고 높이의 1/2 주변 여백
명함 로고 15-20mm 인쇄물 최적

브랜드 컬러 형식

웹 색상 코드(HEX) #01FF75 웹 디자인
RGB 값 rgb(1, 255, 117) 디지털 화면
CMYK 값 CMYK(60, 0, 54, 0) 인쇄물
팬톤 색상 PMS 354 C 특색(별색) 인쇄

앱 아이콘 크기

iOS 앱스토어 1024×1024px 앱스토어 등록
구글 플레이 512×512px 플레이스토어
iOS 디바이스 180×180px iPhone
안드로이드 192×192px 기본 크기