서비스기획심화 - 1주차 Framer 입문

 

 

하나하나 손 코딩 하던게 몇년 전인데

프레이머 같은 노코드 툴이 와장창 나오다니....

이거슨 혁명이다...

 

난 왜 개고생하면서 도메인 만들었지...?

현타가 오면서도 이젠 HTML , CSS 다 까먹어서

포트폴리오 고칠때 빡세겠는데...? 생각했던걸

 

프레이머로 아주 쉽게 만들 수 있다고 생각하니

재밌겠다 싶고 흥미진진해버림~

 

목요일까지 웹페이지 과제 있는지 몰랐는데

부랴부랴 들어서 잘 만들어봐야겠당 ㅎㅎ

 

피그마와 겹치거나 기본적인 알고 있는 내용은 건너뛰고

프레마의 특성이 잘 드러나는 부분만

요약 정리 해봄

---

 

 

1-1 Framer 란 무엇인가? 

 

 

Framer는 웹사이트를 디자인하고, 퍼블리시하고, 분석할 수 있는 올인원 노코드 웹 제작 도구

 

 

노코드 도구의 장점

1) 낮은 학습 곡선

 

전문 프로그래밍 언어를 배우지 않아도, 직관적 UI로 짧은 시간 내 작업 결과를 볼 수 있습니다.

“개발에 막막함”을 느끼던 비개발자들도 쉽게 접근이 가능합니다.

 

2) 프로토타이핑 속도
아이디어나 기획안을 즉시 시각화하여 팀이나 사용자와 공유 가능합니다.
“나중에 개발로 갈아타더라도, 앞단 디자인/UX 구조를 먼저 검증”하는 데 유리합니다.

 

3) 비용 절감
초기 개발 비용을 줄이는 동시에, 유연한 반복 수정(Iteration)이 용이합니다.
소규모 스타트업이나 개인 프로젝트에 특히 매력적입니다.

 

 

 

---

 

 

1-2 인터페이스 살펴보기  

 

 

 

 

---

 

 

1-3 새프로젝트 시작하기  

 

 

페이지 타이틀과 설명을 커스터마이징 할 수 있다.

 

 

 다양한 서브페이지 추가도 가능하다.

 

 

추가한 폴더를 페이지로 바꾸고 싶을 때 

 

 

서브페이지를 루트페이지로(홈) 바꾸고 싶을 때 

 

 

캔버스에서 기본 데스크탑 사이즈가 아닌 반응형 화면들을 보고 싶을 때

각 사이즈를 초과하면 큰 사이즈의 화면이 보여지게 된다.

 

---

 

 

1-4 Frame 중심의 사고방식  

 

 

자식 요소를 먼저 만들고 부모 프레임으로 묶어줄 수 있다

단 부모 프레임을 지우면 자식도 함께 삭제 된다.

 

---

 

1-5 스택 이해하기  

 

부모 프레임 안에 속한 자식 프레임은 부모 프레임을 기준으로 위치가 결정된다.

 

Stack

프레임(Frame)에 특수한 레이아웃 속성을 부여하여, 자식 요소들이 자동으로 세로 또는 가로 방향으로 정렬되게 하는 기능

 

 

 

Stack 만들기 

1) 정렬해 주고 싶은 자식 요소를 클릭 후 Add Srack

 

2) 부모프레임 클릭 후 오른쪽 레이아웃 + 버튼을 누르면 자동으로 스텍 설정됨

 

 

 

Stack 속성

 

스텍화 시키면 다양한 정렬 기능을 사용 할 수 있다.

스텍으로 묶인 자식들은 앱솔루트가 아닌  Relative로 설정이 된다. 

 

스텍을 디폴트로 사용해주는 것이 일관된 여백을 갖게 하는데 도움이 된다.

 

---

 

 

1-6 그리드 이해하기 

부모프레임클릭 후 레이아웃에서 그리드 선택

 

자식 프레임을 묶기도 가능 하지만  애초에 처음부터 가로/세로의 스텍과

그리드를 만들어 줄 수 있다. 

 

그리드의 다양한 정렬 방식을 선택하거나

고급 옵션을 추가 할 수도 있다. 

 

 

자식 요소 프레임 사이즈 조절도 가능하다

한 프레임이 두 칸을 차지하게..

 

 

---

 

 

1-7 타이포그래피 

 

텍스트 추가를 클릭하여 그냥 글을 쓰거나

박스로 크기를 지정하여 입력이 가능하다

 

 

 

텍스트도 프레임이다.

스텍화 하거나 그리드화도 가능하다.

 

 

 

폰트 속성

커스텀에서 폰트를 업로드해서 사용이 가능하다.

 

 

 

 

같은 폰트를 사용한 텍스트를 모두 한꺼번에 바꾸고 싶을 때

폰트 창 아래 버튼을 클릭해서  다 잡아 올 수 있다.

 

 

텍스트를 박스사이즈에 맞춰 크기를 키우고 싶을 때

사이즈 속성을 Fit 으로 바꾸면 된다.

 

행간 자간 조정이 가능하며

숫자의 의미는 지금 폰트 사이즈의 배수를 뜻한다.

 

 

---

 

1-8 링크와 내비게이션 구성하기 

 

 

네비게이션을 만들고 링크를 통해 각 페이지로 걸어줄 수 있다.

 

 

현재 페이지의 네비게이션 버튼에 효과를 주고 싶을 때

링크 > 스타일 > 뉴 스타일 > 속성을 추가 해준다

 

속성을 에디트 해서 들어가면

디폴트 값일 때

호버하였을 때

현 페이지일때 의

네비게이션 상태를 설정할 수 있다.

 

 

특정 버튼을 누르면 스크롤이 한번에 

원하는 섹션으로 이동하게 하는 법

 

1. 버튼의 링크를 현재 페이지로 걸어준다.

 

 

 

 

2. 이동하고 싶은 섹션의 스크롤 섹션에 네임을 추가해 준다

 

 

 

3.  설정해 준 버튼의 섹션 란이 생기고 지정한 섹션으로 이동을 걸어 준다. 

 

 

 

스무스를 주면 부드럽게 스크롤이 내려감 

 

 

원하는 섹션보다 조금 더 위를 보여주고 싶을 때

섹션 스크롤에서 오프셋 Y 값을 주면 된다.

+ -  값을 다 줄 수 있음!

 

 

버튼이나 텍스트에 직접 URL 을 삽입하여 외부 페이지를 열 수 있다.

 

 

---

 

 

1-9 콘텐츠 삽입과 인서트 패널 활용 

 

 

드래그 앤 드롭( 그냥 끌어다 넣기) : 컴퓨터에서 이미지를 직접 캔버스로 드래그하면 이미지 Fill을 포함한 프레임이 생성됨.

직접 프레임 생성 + Fill 설정: 프레임을 그리고 Fill을 이미지로 설정하여 이미지 삽입 가능.

 

Intrinsic Size 복원: 이미지에 오른쪽 클릭 → "Intrinsic Size"로 원본 크기로 되돌릴 수 있음.

 

 

레이아웃 메뉴 활용: Toolbar → Layout → Image 선택 시, 플레이스홀더 이미지가 들어간 프레임 생성됨.

 

 

Plugins (Unsplash 등): Insert 패널에서 직접 무료 이미지 가져오기 가능.

 

 

 

이미지의 중심을 어디로 맞출지

 

 

Fill 모드에서 이미지가 잘릴 수 있음 → "Focal Point" 기능으로 중요한 부분 고정 가능
Portrait 사진 등에서 눈에 포커스를 맞추면 리사이징해도 중요한 정보가 유지됨

 

 

 

비디오 추가

 

 

 

비디오의 URL을 가져오거나 직접 소스를 넣을 수 있다.

단, 이미지 사이즈가 너무 크면 페이지가 무거워 진다.

 

insert 패널에 있는 유튜브를 넣고

유튜브 URl을 첨부해도 좋다.