Framer 포트폴리오 사이트 분석: EALARA가 멋져 보이는 디자인 포인트 5가지

EALARA는 사진 스튜디오용 Framer 템플릿이에요. 주황 한 가지 색, 200px짜리 큰 제목, 모든 섹션에 똑같이 반복되는 '라벨 → 제목 → 설명' 패턴 덕분에 사진이 많은데도 어수선하지 않아요. 화려해 보이지만 규칙은 단순한 사이트예요.

요즘 레퍼런스를 찾다가 눈에 걸린 사이트를 하나씩 뜯어보려고 해요. 첫 번째는 사진 스튜디오 포트폴리오 템플릿 EALARA예요. 왜 멋져 보이는지, 내 작업에 무엇을 가져올 수 있는지 정리해 볼게요.

---

EALARA는 어떤 사이트인가요?

Framer로 만든 사진 스튜디오 템플릿이에요. 실제 회사가 아니라 사진가, 스튜디오, 시각 작가가 가져다 쓰는 템플릿이고, 페이지 맨 아래에 "Designed by Pixcut Studio"라고 적혀 있어요.

한 페이지 안에 소개, 작업물, 서비스, 블로그(저널), 문의가 다 들어 있어요. 사진 포트폴리오에 필요한 것만 담은 구성이라, 개인 포트폴리오를 만들 때 구조를 참고하기 좋아요.

---

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

1. 색을 하나만 쓴 걸까요?

거의 그래요. 화면에 보이는 색은 주황, 검정, 흰색 세 가지예요. 버튼, 라벨, 글자는 모두 흰색과 검정이고, 색이 들어가는 곳은 주황 하나예요.

재미있는 건 주황을 면으로 칠하지 않는다는 점이에요. 검정 바탕 위에 흐릿한 주황 원을 여러 개 깔아서, 화면 가장자리에서 빛이 새어 나오는 것처럼 보이게 했어요. 히어로 사진, 문의 섹션 사진도 주황 톤으로 골라서 사진과 배경이 한 덩어리로 보여요.

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

데스크톱에서 200px이에요. "EALARA ^ 26"을 두 줄로 오른쪽에 붙여 놓고, 그 아래 버튼 두 개를 뒀어요. 글자가 사진만큼 커서 로고가 곧 첫 화면이 돼요.

왼쪽 아래에는 작은 사진 카드가 "01/04"처럼 번호를 달고 바뀌어요. 큰 사진 한 장이 주는 인상은 지키면서, 다른 작업도 있다는 걸 살짝 보여 주는 장치예요.

3. 섹션은 어떻게 구분하나요?

모든 섹션이 같은 순서로 시작해요.

• About Ealara          ← 작은 알약 모양 라벨
Images That Tell        ← 큰 제목 (72px)
Stories.
짧은 설명 한두 줄          ← 작은 회색 글자
────────────────        ← 가는 선

"About Ealara", "Selected Works", "What We Do", "From The Journal" 모두 이 틀이에요. 섹션마다 레이아웃은 달라도 시작이 같으니, 스크롤하면서 "아, 새 섹션이구나"를 바로 알 수 있어요. 사진이 화려한 사이트일수록 글자 쪽 규칙은 이렇게 단단해야 덜 어수선해요.

4. 작업물은 어떻게 보여 주나요?

사진 카드가 스크롤하면 위로 하나씩 겹쳐 쌓여요. 카드마다 Fashion, Portrait, Editorial, Campaign 같은 작은 라벨이 붙어 있어서, 갤러리를 따로 만들지 않고도 어떤 분야를 하는지 보여 줘요.

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

서비스 여섯 개를 카드나 아이콘 없이 큰 글자 목록으로만 보여 줘요. 한 줄만 또렷하고 나머지는 반투명이라, 사진 위에서도 지금 보는 항목이 분명해요. 사진 사이트답게 설명보다 분위기로 보여 주는 방식이에요.

---

나머지 섹션은 어떤가요?

구분	어떻게 생겼나요	눈여겨볼 점
저널	세로로 긴 사진 카드가 가로로 흘러가요	날짜·제목·한 줄 요약·Read More만 남겼어요
문의	주황 사진 위에 "Have a story to tell?"	버튼은 하나(View Portfolio)만 둬요
푸터	큰 EALARA 글자가 세로로 흐르고 옆에 사진 카드	마지막까지 사진과 큰 글자로 끝내요

---

글꼴은 무엇을 썼나요?

Inter Display 하나예요. 크기와 굵기만 바꿔서 위계를 만들어요.

쓰는 곳	크기	굵기
히어로 제목	200px	Bold (700)
섹션 제목	72px	Medium (500)
메뉴·버튼·본문	18px	Regular·Medium (400~500)
라벨·작은 설명	12~14px	Medium (500)

섹션 제목을 Bold가 아니라 Medium으로 둔 게 포인트예요. 글자가 커도 무겁지 않아서 사진과 싸우지 않아요.

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

메뉴는 햄버거 버튼으로 접히고, 큰 제목과 버튼은 그대로 오른쪽 정렬을 지켜요. 버튼은 폭이 넓어져서 손가락으로 누르기 쉬워요.

---

내 작업에 가져올 점은?

• 색은 하나만 정하고, 면이 아니라 빛으로 깔기. 흐린 원형 그라데이션 몇 개면 충분해요.
• 섹션 시작 틀을 하나 만들고 끝까지 반복하기. 라벨 → 제목 → 설명 → 선.
• 큰 제목은 Medium 굵기로. 크기로 강조했으면 굵기는 한 단계 내려요.
• 사진 톤을 브랜드 색에 맞춰 고르기. 같은 주황 톤 사진만 써도 사이트가 한 덩어리로 보여요.

반대로 그대로 가져오기 어려운 점도 있어요. 사진이 주인공인 템플릿이라, 사진이 적거나 톤이 제각각인 사이트에서는 같은 효과가 나지 않아요. 글이 많은 블로그나 서비스 사이트라면 색과 섹션 틀만 빌려 오는 게 좋아요.