기본코딩 1일차 _ Framer

 목차 

1. 노코드 툴을 배우는 이유
2. Framer 인터페이스 
3. Figma ↔ Framer
4. Position 개념
5. 실습
   
   
   
   
   

 노코드 툴을 배우는 이유 

▶ 시간 단축
    : 아이디어 → 실행까지 시간을 단축하여 속도를 폭발적으로 끌어올릴 수 있음
     (기획 → 디자인 → 개발자 or 퍼블리셔 필요 → 비용/시간 소요 → 일정 지연)

노코드 툴을 배우는 이유

 

 

▶ Framer 의 강점

• 빠르게 디자인 → 웹으로 변환
• 개발자 없이 빠른 MVP / 랜딩페이지 제작
• 스타트업, 1인 브랜드, 프로토타입에 최적
• 기업 블로그 제작 최적
  (CMS - 컨텐츠 관리 시스템)

 

▶ 개발자가 필요한 경우

• 복잡한 기능
  (ex. 로그인, 결제, 사용자 데이터 처리)
• 대규모 웹사이트
  (수십 ~ 수백 페이지 규모)
• 기업 전용 솔루션 통합
  (맞춤형 백엔드 개발)

 

▶ 결론

     : Framer 는 빠른 구현과 테스트에 적합

 

 

 

 Framer 인터페이스 

인터페이스

Framer

Framer

Framer

Framer

Framer

 

▶ 알아야하는 개념

Figma	Framer	설명
Frame	Frame	레이아웃의 기본 단위 / 요소들을 담는 박스
Autolayout	* Stack	자동 정렬 시스템
Width Fixed	Width Fixed	요소의 크기를 수동으로 지정하고 고정하는 프로퍼티 (고정)
Width Hug	* Width Fit	컨텐츠에 맞춰 사이즈를 줄이는 프로퍼티
Width Fill	Width Fill	부모 요소의 너비를 가득 채우는 프로퍼티
Position Fixed	Position Fixed	위치 고정
Ignore Autolayout	* Position Absolute	자동 정렬에서 벗어나 자유롭게 위치 선정

 

 

 

 Position 

▶ Position 속성

속성	설명
Relative	화면 흐름대로 쌓임 ( = Defult)
Absolute	원하는 곳에 자유롭게 붙일 수 있음
Fixed	화면에 고정
Sticky	스크롤 하다 특정 위치에 도달하면 고정

 

 

 

🌱 오늘의 한 걸음

 오늘은 Framer 툴에 대한 실습을 진행했다.

실습 _ Size

• Fixed : 300px 사이즈로 부모 컨테이너 안에 고정
• Relative 80% : 부모 컨테이너 안에 전체(100%) 중 80%를 차지
  * 패딩값을 제외한 100% 중 차지
• Fill : 부모 컨테이너를 채움
• Fit : Figma 의 Hug 와 비슷한 기능
        (컨텐츠 크기에 맞게 자동조절)

---

실습 _ Position

• Fixed : 화면을 스크롤하면 항상 왼쪽 상단에 위치
• Relative : 화면을 스크롤하면 위로 올라감
                 (화면 내에서 고정된 위치)
• Sticky : 일정 부분부터 화면 상단에 고정
• Absolute : 부모 컨테이너를 기준으로 정확하게 지정할 수 있는 레이아웃 속성
                   (피그마에서 Constraints 에서 설정 가능)

---

실습 _ Distribute

• Start : 맨 왼쪽 정렬
• Center : 가운데 정렬
• End : 오른쪽 정렬
• Space Between : 양 끝 여백 0, 요소 사이만 균등한 간격(auto)
• Space Around : 양 끝 여백 = 요소 간격의 절반
• Space Evenly : 양 끝 여백 = 요소 간의 간격

---

실습 _ Card UI

---

실습 _ button

• 인스턴스에 대한 용어는 없으나, 컴포넌트 삽입 시 동일하게 동작함
• 버튼의 Hover, Pressed 상태를 바로 확인 가능

 

▶ 느낀 점

 확실히 피그마와 비슷한 개념들이 많아서 금방 익숙해진 것 같다. 특히 버튼의 상태에 따라서 바로바로 어떻게 보이는지 실제로 볼 수 있는 기능이 신기했다. 코딩이라고 해서 html이나 css를 배울 줄 알고 살짝 걱정했었는데(필교 파이썬도 허덕였던..) 생각하던 코딩은 아니여서 안심이였다...