Framer 포트폴리오 사이트 분석: Nina Park가 흑백인데도 멋져 보이는 이유 5가지

Nina Park는 디자이너 개인 포트폴리오용 무료 Framer 템플릿이에요. 검정·흰색·회색만 쓰고 색은 손톱만 한 픽셀 점 몇 개에만 넣었어요. 156px 소문자 제목과 글꼴 세 가지(고딕·명조·고정폭)의 역할 분담 덕분에, 장식이 적은데도 심심하지 않아요. 대신 움직임에 공을 들였어요. 첫 화면 등장과 서비스 목록이 대표적이에요.

1·2편의 EALARA가 주황 빛과 사진으로 분위기를 냈다면, 이번 사이트는 정반대예요. 거의 흑백인데도 오래 보게 되는 이유를 정리해 볼게요.

---

Nina Park는 어떤 사이트인가요?

Framer로 만든 개인 포트폴리오 템플릿이에요. 페이지 제목이 "Nina Park - Free Portfolio Website Template"이라서 무료로 가져다 쓸 수 있는 템플릿이고, Nina Park는 실제 인물이 아니라 예시로 든 '브랜드·웹 디자이너'예요.

한 페이지 안에 대표 작업 4개, 서비스 6개, 작업 3단계, 개인 작업 갤러리, 문의가 들어 있어요. 브랜딩과 웹을 같이 하는 1인 디자이너가 보여 줘야 할 것만 순서대로 담았어요.

---

이 사이트가 멋져 보이는 이유 5가지

1. 색은 어디에 썼나요?

거의 안 썼어요. 글자와 버튼은 검정·흰색·회색뿐이에요. 색은 히어로 곳곳에 흩어진 8px 안팎의 작은 정사각형 점에만 들어가요. 회색 하프톤(망점) 사진 위에 빨강, 파랑, 분홍, 보라, 초록 점이 하나씩 떠 있어서, 흑백 화면에 색종이 조각을 뿌린 것 같아요.

화면 전체가 흑백이니, 작품 사진의 색이 가장 먼저 눈에 들어와요. 포트폴리오에서 색을 아끼는 이유는 작품에 양보하기 위해서라는 걸 잘 보여 줘요.

2. 제목은 얼마나 큰가요?

히어로의 "nina park / visual designer"가 156px, 섹션 제목은 120px이에요. 모두 Geist Medium(500)이고 전부 소문자로 썼어요. 대문자가 없으니 글자가 커도 소리치는 느낌이 없고, 차분하게 말을 거는 것 같아요.

"selected work", "services", "project approach", "let's work together"까지 섹션 제목이 모두 같은 크기·같은 굵기라서, 스크롤하면 큰 소문자 한 줄이 섹션의 시작을 알려 줘요.

처음 접속하면 이 첫 화면이 한 번에 뜨지 않아요. 배경 → 제목 → 태그 → 사진 → 소개 문장 순서로 0.1~0.2초씩 시간차를 두고 올라와요. 이 등장 순서도 4편에서 직접 따라 만들어 볼게요.

3. 글꼴을 세 가지나 썼는데 왜 어수선하지 않나요?

글꼴마다 맡은 일이 정해져 있어서예요.

• Geist (고딕): 큰 제목과 서비스 이름
• Gambarino (명조): 소개 문장, 프로젝트 이름, "start a project" 같은 말 거는 문장
• Geist Mono (고정폭): 메뉴, 분야 태그, "BOOKING PROJECTS FOR Q3 2026" 같은 정보성 라벨

작업물 카드를 보면 한 줄 안에 명조 프로젝트 이름("maison vell")과 고정폭 대문자 분야("VISUAL IDENTITY, ART DIRECTION")가 양 끝에 놓여요. 성격이 다른 글꼴이 같은 줄에서 대비를 만들어요.

4. 서비스 목록은 왜 눈에 띄나요?

평소에는 회색 큰 글자 여섯 줄이에요. 마우스를 올린 줄만 펼쳐지면서 바탕이 옅은 회색으로 바뀌고, 글자가 검게 진해지고, 아래에 세부 항목 4개가 나타나요. 클릭 없이 훑어보기만 해도 서비스마다 무엇을 해 주는지 알 수 있어요. 이 움직임은 4편에서 직접 따라 만들어 볼게요.

5. 크리에이티브 탐구 섹션은 어떻게 다른가요?

페이지에서 유일하게 바탕이 검은(#111) 섹션이에요. 가운데 "creative explorations" 제목을 일러스트 8장이 바퀴처럼 둘러싸고, 바퀴가 천천히 계속 돌아가요. 사진은 바퀴 바깥을 향해 놓여서 아래쪽 사진은 거꾸로 보여요. 흰 화면을 쭉 내려오다 갑자기 어두워지고 그림이 돌기 시작하니, 개인 작업이 '본업과 다른 놀이'라는 느낌이 확 살아요.

---

나머지 섹션은 어떤가요?

구분	어떻게 생겼나요	눈여겨볼 점
작업물	큰 사진 2열, 아래에 명조 이름 + 고정폭 분야	오른쪽 위 "see all work (6)" 알약 버튼 하나로 전체 보기
서비스 아래 띠	"LAUNCH READY IN 2 WEEKS ☆ EARN TRUST ☆ …" 알약 문구 한 줄	고객이 얻는 결과를 짧은 말로 늘어놓아요
작업 방식	STEP 01~03 카드 세 장(direction, craft, ship)	카드마다 한 단어 제목 + 세 줄 설명 + 사진
문의·푸터	"let's work together" + 명조 알약 버튼 두 개	푸터에 초 단위까지 나오는 뉴욕 시각과 "Booking projects for Q3 2026"

---

글꼴은 무엇을 썼나요?

Geist, Gambarino, Geist Mono 세 가지예요. 크기는 이렇게 나뉘어요.

쓰는 곳	글꼴	크기	굵기
히어로 제목	Geist	156px	Medium (500)
섹션 제목	Geist	120px	Medium (500)
서비스 이름·번호	Geist	56px	Medium (500)
소개 문장	Gambarino	24px	Regular (400)
서비스 설명·세부 항목	Geist	18px	Regular (400)
메뉴·라벨	Geist Mono	14px	Regular (400)

서비스 이름(56px)은 글자 사이를 -3.36px(-6%) 로 바짝 좁혔어요. 큰 고딕 글자를 좁게 붙이면 단어가 한 덩어리로 보여서 로고처럼 단단해 보여요.

모바일에서는 어떻게 바뀌나요?

메뉴는 "MENU" 한 단어로 접히고, "visual designer"는 작은 한 줄로 내려가요. 이름 "nina park"만 화면 폭을 꽉 채우고, 사진·예약 문구·버튼은 한 덩어리로 묶여 아래로 가요.

---

내 작업에 가져올 점은?

• 포트폴리오는 흑백으로 두고, 색은 작은 점으로만. 작품 사진이 주인공이 돼요.
• 글꼴은 역할로 나누기. 제목은 고딕, 말 거는 문장은 명조, 정보 라벨은 고정폭.
• 큰 제목은 소문자 + 좁은 자간. 커도 부드럽고, 단어가 한 덩어리로 보여요.
• 목록은 호버로 펼치기. 세부 내용을 숨겨 두면 첫 화면은 깔끔하고, 궁금한 사람만 더 봐요.
• 분위기를 바꿀 섹션 하나만 어둡게. 개인 작업처럼 성격이 다른 내용을 구분하기 좋아요.

반대로 그대로 가져오기 어려운 점도 있어요. 히어로의 하프톤 배경과 픽셀 점은 글자가 거의 없는 첫 화면이라서 어울려요. 글이 많은 블로그나 서비스 사이트에 깔면 읽기를 방해할 수 있어요. 또 한글은 소문자가 없으니, 제목은 굵기를 한 단계 낮추는 쪽으로 같은 차분함을 내는 게 좋아요.