Framer 시작하기 1화 ⎮ 프레이머 소개 : 레이아웃 기본 이해, 단축키, 예제 만들기 ⎮ 방구석 프레이머
Vložit
- čas přidán 14. 07. 2024
- 안녕하세요, 방구석 프레이머 입니다. 프레이머를 시작하고자 하시는 분들, 직접 웹페이지를 제작해보고 싶으신 분들을 위해 영상을 만들어보기로 했습니다. 앞으로도 궁금하신 기능이나 보고 싶은 내용이 있으시면 댓글로 달아주세요! 또한, 이번 영상에서 만들어본 예제의 이미지 파일과 폰트가 필요하신 분들은 아래 링크를 통해 다운받아 이용하시면 되겠습니다 :P
예제 이미지 파일 다운로드 ▼
drive.google.com/drive/folder...
폰트 다운로드 ▼
강원교육튼튼체: www.gwe.go.kr/mbshome/mbs/kr/...
Pretendard: cactus.tistory.com/306
00:00 오프닝
02:05 프레이머 설치하기
02:30 프레이머 둘러보기
04:19 예제 둘러보기
04:52 예제 만들기 - 프레임 생성하기
06:01 예제 만들기 - Layout 이해하기
08:18 예제 만들기 - 이미지 업로드하기
10:46 예제 만들기 - 좌우 정렬하기
11:02 예제 만들기 - 텍스트 폰트 변경하기
14:48 예제 만들기 - 그라데이션 채우기
17:15 예제 만들기 - 이미지 필터 추가하기
18:12 예제 만들기 - 섹션 사이 간격 추가하기
19:40 예제 만들기 - 페이지 생성하기
19:52 예제 만들기 - 메뉴 링크 연결하기
21:34 예제 만들기 - 웹페이지 생성하기
22:05 예제 만들기 - 외부 링크 연결하기
22:45 클로징 - 다음 강좌 소개
--------------------------------------
음악 ⎮ taeho9raphy
좋은 강의 감사합니다. 강의 내용 중 궁금한 점이 있어 댓글 남깁니다.
Q. 강의 중 S가 colums의 단축키라고 말씀주셨는데, 실제로는 S는 Stack의 단축키로 나옵니다. 해결 방법을 찾던 중, 아래 댓글 중 Shift+C 선택 시 Colums 사용이 가능하다고 하여 사용해보았으나 저는 Shift+C를 사용하여도 Stack이 생성되는데 혹시 이 부분에 대하여 해결 방법을 알 수 있을까요?
또한 Stack으로 생성할 시 어떠한 점이 다른지 알고 싶습니다.
감사합니다.
업데이트 하면서 stack이라는 개념이 수면 위로 올라왔어요! Columns과 Rows를 모두 Stack이라고 부르며 정렬 방향이 가로냐 세로냐 차이 입니다!
영상 너무 감사해요ㅠㅠ 이렇게 하나씩 배워가면서 프레이머로 포트폴리오 만들기 도전해보고 싶어요! 🔥
안녕하세요 1편 부터 차근 차근 볼께요
선생님 좋은 강의 올려주셔 정말 감사합니다!!!
감사합니다!!!!! 행복하세요!!!!!
감사합니다!
잘따라하고잇어요 최고❤❤
감사합니다 :)
와 진짜 너무 좋아요. 감사합니다. 꾸준하게 업로드 부탁드려요!!
와 진짜 감사드립니다!
우리나라에도 프레이머 강의가 있다니..!!
마른 땅에 단비 같은 강의네요!
프레이머에 흥미가 생겨서 시작했는데 강의 너무 유익한 거 같아요. 진짜 감사합니다.
감사합니다ㅎ
너무 잘봤습니다 ❤ 설명도 잘해주셔서 이해가 잘 되네요
감사합니다! 다음 영상도 잘 준비해볼게요 :)
영상 잘 보고갑니다.
프레이머 강좌들 많이 봤지만 본것중에 제일 깔끔하고 설명도 잘해주시네요
좋게 봐주셔서 감사합니다!
배우기전에 항상 목차처럼 큰 그림을 보는걸 선호하는데 작업과정이 설명도 깔끔하고 영상도 깔끔해서 너무 좋았어요 프레이머 잘 배워볼게여!
감사합니다~ 계속 신경써보겠습니다 :)
다른 강좌들과 다르게 빠른 템포라서 오히려 끝까지 집중하고 멈추면서 봤습니다. 너무 감사합니다.
딱 제가 의도했던 바인데! 잘 봐주셔서 감사해요!
좋은강의 감사합니다❤
정말 자세한 한국어 강좌가 절실했는데 가뭄의 단비같은 영상이네요 ㅠ 궁금한게 너무 많은데 앞으로 나올 강의가 많이 기대됩니다 ㅠ 감사해요!!
도움이 필요하신 내용이 있으시면 알려주세요! 도움이 될 수 있다니 다행입니다 :)
진짜 너무 감사드려요! 덕분에 홈페이지 만들어봤어요!
저도 감사드립니다👏🏻👏🏻👏🏻
재밌어용 ㅎㅎㅎ 좋은 영상 많이 많이 올라오면 좋겠습니다!!
속도 내서 올려보겠습니다 :)
늘 프레이머 강의가 없어 시작할 엄두를 못냈었는데, 이렇게 채널 만들어주셔서 너무너무x100 감사합니다.. 프레이머가 피그마처럼 손에 익는 그날까지 열심히 배워볼게요! 감사합니다 ㅠㅠ
감사합니다 :)
최고의 강의 감사합니다! 설명도 잘하시고 영상 프로덕션 수준도 높아서 많이 배웠습니다👍👍
좋게 봐주셔서 감사합니다 :)
구현 가능한 범위내에서 디자인이 나오길 바라고, 기존 소스를 최대한 재활용해주길 바라는 마음에서 여러 협업툴을 찾아보고 있었는데 좋은 정보 공유 감사합니다~
프레이머 정말 배우고싶었는데 강의 영상 증맬로 감사합니다ㅠ_ㅠ!!!
감사합니다!ㅎ
프레이머 사용 정보가 많이 없어서 헤메는 중이었는데 유익한 정보 너무 감사해요👍👍
궁금하신 점 있으시면 알려주세요! 다뤄보겠습니다 :)
너무 도움이 되었습니다 감사해요!!
다행이에요! :)
너무너무 도움돼요!!! 토스에서 사용한다고 해서 처음으로 알게 되었는데, 목소리도 너무 듣기 좋고 설명도 간결하게 잘 해주셔서 앞으로도 자주 찾아뵐 것 같습니당...👍 감사합니다!!
감사합니다~ 더 힘내서 계속 찾아뵐게요 :)
목소리도 좋고 강의 템포도 좋고…🥲
바로 구독 박아버림…
좋게 봐주셔서 감사합니다!!
감사합니다~!
감사합니다~
프레이머 유튭 채널 생성해주셔서 감사합니다 ㅠㅠ!!! 프레이머로 디자인 시스템 만들는 방법 알려주시면 도움이 많이 될 거 같습니다 !!
고려하겠습니다!
매마른 프레이머 한국 강좌 시장에 소중한 영상 감사합니다. 자주 올려주세요!
노력하겠습니다😂
@@homestudioframer😊😊😊😊
ui가 피그마랑 비슷해서 포트폴리오 만들기 시작했는데 외국 영상도 많이 없고 한국어로도 없고 고생 중이었는데 만들어주셔서 감사해요ㅠㅠㅠㅠㅠㅠ
감사합니다! 얼른 또 다음 콘텐츠 준비해오겠습니다!
선생님 너무 좋은 강의입니다!@
디자인은 첨인데 설명이 좀 빠르네요....ㅠㅠ 그건 사람마다 맞추기 힘드시니 어쩔 수 없어도 맥위주 명령어는 자막에 좀 윈도우도 넣어주시면 더 열심히 따라해보겠습니다.
참고하겠습니다!
와우 혹시 중앙대 학생이신가요? 거두절미하고 영상 너무 잘봤습니다! 디자이너신지 아니면 대학생이신지 궁금합니다!
방구석님 영상보고 프레이머에 관심이 생겼습니다. 프레이머를 이용하면 호스팅을 꼭 여기서 이용해야하나요? 아니면 국내의 호스팅과 도메인을 구입후 연결울 하면될까요? 가격정책이 2가지로 분류되서 헷갈리네요. ㅜ
선생님 미국에 살고 있는 할머니가 따라 해 보고 있는데, 제 1화에서 9:56 에 option + command+ enter 가 window pc 에서는 어떻게 되는 건가요?
거기에서 걸려서 더 이상 못나가겠어요. simple 하고 쉽게 만들어 주신 영상 정말 감사합니다. 위의 것 좀 제가 알아 들을 수 있도록 설명 부탁 드립니다
안녕하세요, 윈도우에서는 ctrl + alt + enter 입니다! 좋게봐주셔서 감사드립니다! 다른 단축키도 윈도우에서는 command 대신 ctrl, option 대신 alt라고 생각해주시면 대부분 될 거에요!!
Thank you so much for explaining this to me! 감사!@@homestudioframer or
안녕하세요! 좋은 강의 너무 감사합니다 🥹 강의 내용 중 궁금한 것이 있어 댓글 남깁니다!
Pages에서 about, work, contack 창 3개를 추가하라고 말씀해 주셨는데 현재(24. 6. 4 기준) + 선택 시 강의 영상처럼 지구본 모양의 page(?)가 추가되는 것이 아니라 New Page, New CMS Page 등의 옵션이 뜨는데 이 부분 Framer가 업데이트 되면서 변경된 부분일까요? 혹시 업데이트로 변경 되었다면 해당 내용 어떻게 작업할 수 있는지 문의드립니다! 🙇🏻♀
new page 입니다!
처음 사용자입니다. 하나씩 따라하며 익히기에 정말 최고의 영상인 것 같아요. 감사합니다^^ 따라하다 보니 "상위 Column 생성 단축키 : 옵션+커멘트+엔터" 라고 설명해 주셨는데, 키보드에 옵션과 커멘트 버튼이 없는데 어떤 버튼을 말씀하시는 것인지 궁금합니다.
윈도우에서는 컨트롤 + 알트 키 입니다!
감사합니다. 도메인과 연결 및 서버할당해서 구글에서 실제로 홈페이지가 구현되도록 하는 방법도 가르쳐주셔요^^
강의 정말 절실했습니다. 감사합니다.
옹 그것도 준비해보겠습니다
안녕하세요...! 단비 같은 프레이머 강의 너무 잘 보고 있습니다..! 강의 끝까지 다 보고 다시 보면서 따라는 중에
"Columns" 를 만드시면 방프님은 한개의 도형만 나오게 되는데 저는 2개가 "Stack" 으로 묶여서 나옵니다..!
Layers 탭에서 Stack 우클릭 후 "Remove Stack" 을 누르면 Columns이 아니라 Frame 으로 나뉘어 지는데 상관 없는 것인가요..? ㅠㅠ
업데이트 하면서 colums와 rows가 stack이라는 개념으로 합쳐졌어요. 둘다 스택인데 차이는 정렬 direction이 가로냐 세로냐에서 차이가 있을 뿐입니다!
프레이머님 그 자주사용하는 아이콘은 어떻게 하는건가요?
안녕하세요^^ 프레이머 입문자인데 강좌 너무 잘 보고있어요~! 강좌를 보다 궁금한점이 있어서요~~! 혹시 화살표나 아이콘을 불러올 수 있는 단축키가 있을까요? ㅠㅠ
특수문자의 경우 윈도우와 맥 각각의 방법으로 넣으시면 되는데(윈도우는 ㅁ+한자키, 맥에서는 ctrl + command + space), 이모지같은 다른 디자인된 컴포넌트를 사용하고 싶으시다면 프레이머 화면 왼쪽 상단 인서트에서 찾아보실 수 있습니다.
윗분 말씀대로 워드프레스 내에서 페이지빌더를 사용하면서 반응형 요소는 템플릿 소스를 활용하여 만드는 방법이 이전의 일반적인 방식인데, 이것과 비교했을때 프레이머의 장점은 뭐라고 생각하시나요? 의견이 궁금합니다
답변이 많이 늦어져서 죄송합니다! 우선 저는 프레이머로 시작해서 현재까지 프레이머만 사용해본 유저라는 점을 말씀드릴게요. 커뮤니티에서 글로벌 유저의 의견을 종합해보면 가장 큰 장점은 바로 디자인 자유도 라고 합니다. 개발자에게는 좀 제약이 많고 불편함이 있는게 사실인 것 같지만, 디자이너에게는 훨씬 친화적이라고 보입니다. 역시나 제 의견은 참고만 해주시면 될 것 같네요 :)
실습대로 따라하면 프레이머 단축키 s누르고 드래그했을 때 프레임이 두 개 만들어지는데 어떻게 하면 될까요?
안녕하세요 영상 잘보고 있습니다 늦은 나이에 홈페이지 를 만들어 볼려고 방구석 프레이머님의 영상을 보고 따라하는중인대 안되는 부분이 있어서 댓글 남겨봅니다 7:33 부분에 columns 생성하는대...좌측상단에 서 클릭해서 columns 생성 했는대 님 영상처럼 한개의 바가 생성되는것이 아니라 두개로 나누어 져서 생성이 되고 우측 에 사이즈조절 하는것이 보이지가 않습니다 columns 생성하는법이 shift+c 가 아닌 다른 단축키가있는가요? 아울러 사이즈 조절 이 안보입니다..ㅜㅜ
단축키 s를 눌르시고 마우스로 드래그해서 생성해주시면 columns을 생성하실 수 있습니다
프라이머 강의 감사합니다. 강의 보면서 따라하고 있는데 S 로 스택을 만들면 저는 두개로 나뉘어진 스택 그룹이 만들어 집니다. 혹시 현상에 대해 아실까요? 프라이머 커뮤니티나 질문에서 찾아도 안나오더라구요.
저도 동일한 현상인데 해결방법을 찾으셨을까요? 방구석 프레이머님 ㅠㅠ 저도 궁금합니다
안에 자동으로 프레임을 추가해줄 뿐 문제는 없습니다! 안에 프레임은 그냥 지우시면서 진행하시면 됩니다!
마지막 부분에서 퍼블리시 할 때 나오는 링크를 직접 설정할 수는 없는 건 가요?
커스텀 도메인은 플랜을 구독하셔야 변경이 가능합니다. 프리(무료) 플랜인 상태에서도 커스텀이 가능은 한데요. 끝에 framer가 붙어요!
ABOUT WORK CONTACT 치실 때 각각 다른 컴포넌트같던데...어떻게 일자로 맞춰서 쓰신건가요? 다른데 화면 텃치했다가 다시 t를 누르니까 엉뚱한 곳에 TEXTBOX가 설정되서 일열로 안되고 삐쭉빼쭉해서 다시 맞춰야 되는데 ㅠㅠ
about, work, contact의 상위레이어가 Frame 상태여서 자유배치가 되는 거 같아요. 상위레이어를 선택하고 편집창에서 Layout을 활성화 해보세요!
이 설명을 미리 해주셨으면 덜 헤맬거 같아요~ 감사합니다!
지금은 다 유료버전밖에 없는데 내용을 업그레이드좀 하지...
좋은 강좌 거듭 감사드립니다. 그런데, 워프에서 도메인 / 호스팅 설정하듯이... 프레이머에서는 도메인 / 호스팅 설정을 어떻게 해야하는지요? 우문에 현답해주시면 정말 감사드리겠습니다.
영상으로 꼭 한번 다뤄드리겠습니다
키 설명이 맥북위주라서요ㅠ 맥북이아닌 컴퓨터로는 option comand enter키를 뭐로대체해야하는니 등등 알러주시면안될까요? 13:28
옵션은 컨트롤, 커맨드는 알트로 대체하시면 됩니다!
미리보기하고 스크롤하려고 마우스를 갖다대면 약간 줌이 되는데 없앨수 있나요?ㅠㅠ
어떤 상황인지 잘 파악이 안 되네요ㅠ
현재 프레이머 사용하고 있는데 ㅠㅠ 자꾸만 columns가 stack으로 바뀌어요 ㅠㅠ
거기다가 제 마음대로 움직이지가 않아요 ㅠㅠ 도와주세요ㅠㅠ
팀플때문에 저 혼자 해보고 있지만 아무래도 도움이 절실해서요 ㅠㅠ
columns 와 rows가 모두 stack 입니다! 문제 없어요!
이렇게 만들면 css만 따로 뽑아서 개인 프로젝트에 쓸수있나요?
얼마전까지 css코드를 제공해줬는데 최근 업데이트로 기능이 사라졌어요.. 다른 방법이 있는지 찾아보고 알려드리겠습니다!
@@homestudioframer 감사합니다 도움이 되었습니다
예제가 없네요ㅕ 만들어보고싶은디
새로운 링크에 예제 이미지 올려드렸어요!
안녕하세요~! 질문이 있습니다! 단축기s를 눌러서 콜룸을 만드는데 강사님처럼 1개로 만들어지지 않고 2개로 나눠서 만들어지는데 이건 왜그러는걸까요?
업데이트 하면서 자동 생성의 설정을 만질 수 있더라구요! 프로그램 화면 왼쪽 상단에 프레이머 로고 버튼 클릭해서 설정 찾아보시면 컬룸 생성에 대한 설정을 선택할 수 있어요!
탑바가.. 스크롤 했을때 타이틀 내용에 덮혀요.. 맨 앞으로 보일 수 있게 하는 건 어떻게 해야할까요?
그럴 땐 해당 레이어를 선택한 상태에서 style에서 +버튼 클릭하셔서 Z Index 값을 높여보세요!
안녕하세요! 영상 보고 따라는 중인데 컬럼 생성하니까 자꾸 두개가 생기는데 왜 그런건가요?
저도ㅠㅠ
버젼이 업그레이드 되면서 그런건지.. 저도 강의와 달리 안쪽 2개 컬럼 생성되는거 지우고 색상도 비우고 따라하고 있습니다.
그냥 지우시면서 사용하시면 됩니다! 괜찮아요! 문제 없습니다
insert 버튼등이 나오는데서 잘못해서 뭔가 눌럿더니 account settings updates 등이 나오고 편집창 자체가 사라졋어요 어떻게 2분30초의 창으로 돌아가나요 그래야 방송을 정주행하는데 돌겟네요
화면 왼쪽 상단에 돌아가기 버튼이 있을텐데 없다면 프로그램을 껐다가 새 프로젝트로 들어가는 것도 방법입니다
하다가 topbar에서 spacebetween항목이 비활성화로 뜨네요 ㅠ 뭘잘못해서 그런지 모르겠어요
탑바 안에 포함되어 있는 레이어들의 position이 relative로 되어 있는지 확인해주세요!
윈도우 단축키 s는 stack 이던데 Columns 단축키는 무엇일까요? 구글 서치해서 방향키 위 +C로 하면 된다는데 안되네요
stack이 columns과 rows 입니다!
안녕하세요, 선생님! 지금 FRAMER START WITH AI 아무리 찾아도 안보이는데, 메인에도 안보이고요, 유료로 바뀌었나요?
기능이 사라졌어요ㅠ
프레이머 ai 기능이 없어졌나요? 보이질 않습니다 ㅠㅠ
현재 추가적인 기능 업데이트 때문에 잠시 기능을 숨겼다고 하네요…; 만약 업데이트가 되면 24년이 될 것 같고, 반대로 뭔가 어려움이 있을 경우 빠르면 이번주 안에 다시 돌려놓겠다고 합니다.
ㅋㅎㅎ 나만 그런게 아니구나.
키 물어보는 리플에는 그냥 좋아요만 달아두고 답을 안쓰네.
왜 떄문에??
바빠서 늦어졌습니다!
워프라는 좋은 툴이 있는데 왜 이걸 쓰는건지...
그러게요
워프가 뭔가요??@@homestudioframer
워드프레스 입니다!