thomas

안녕하세요, 김지아님. Override 사용에 어려움이 있으신군요.다른 문의에 대한 답변을 보셨다면 아시겠지만, Framer에서 더 이상 Override, Data 등의 Legacy 코드들의 지원을 하고 있지 않습니다. 이를 대체하는 코드인 HOC (Higher-Order Component)와 createStore등의 자료도 한국에서는 찾기 어려우셨을 거에요.현재 버전에서 활용 가능한 코드는 Framer 공식 API 문서인 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.framer.com/motion/">https://www.framer.com/motion/</a> (무료), 추천 사이트에서 소개드린 <a target="_blank" rel="noopener noreferrer nofollow" href="https://framerbook.com/x/toc/">https://framerbook.com/x/toc/</a> (유료) 등의 사이트에서 확인이 가능해요. 혹은 Framer의 커뮤니티인 <a target="_blank" rel="noopener noreferrer nofollow" href="https://discord.com/invite/framer">https://discord.com/invite/framer</a> 에서도 정보를 얻을 수 있습니다. :)저도 강의를 드리려 노력하지만 본업으로 인해 제작이 쉽지는 않네요. 빠른 시일내에 새로운 강의로 찾아뵙도록 하겠습니다.강의 봐주셔서 감사합니다!

스마트 컴포넌트 X Code Override

안녕하세요 dkwls2364님, 새로운 framer UI에 대해 문의주신걸까요?연달아 주신 질문이 많아, 해당 답변으로 답변드리도록 할게요.&nbsp;Q 프레이머 레이아웃 변경으로 / 스크롤 , 페이지 기능을 못찾겠습니다.<ul><li>canvas 화면으로 들어간 후, insert 버튼을 누르면 스크롤을 확인할 수 있을거에요<img src="https://cdn.inflearn.com/public/files/posts/145ebd9f-c429-41d5-afd0-4abd6924296d/image.png" alt="image" title="image"><img src="https://cdn.inflearn.com/public/files/posts/229cf1bd-3450-4570-b4ae-b0f3487a6caa/image.png" alt="image" title="image"></li></ul>Q 저는 모바일 사이즈를 기본으로 시작하고 싶은데, 변경할 수 있는 방법이 있을까요?<ul><li>캔버스 화면에서 F버튼(프레임)을 선택하면 우측에 모바일 화면 스크린사이즈가 보입니다!</li></ul><img src="https://cdn.inflearn.com/public/files/posts/6f0ffc50-08af-4bc1-9f25-602d5883ccd7/image.png" alt="image" title="image">Q 아이폰 모델에 담긴 화면을 보고 싶어요.<ul><li>신규 버전의 Framer에서는 해당 기능을 지원하지 않습니다.ㅠㅠ</li></ul>Q 스크린 크기 늘려야 스크롤이 생기네요<ul><li>web 버전에서는 스크린을 늘리면 스크롤이, canvas에서는 스크롤 컴포넌트를 사용하면 스크롤 이 생깁니다.</li></ul>프레이머가 과거 프로토타입 위주의 제작 화면을 지원하지 않기 시작하면서, 현 강의와 현재 프레이머의 화면이 너무 달라 불편하셨을텐데요. 빠른 시일내에 새로운 강의를 통해 찾아뵙도록 하겠습니다.강의봐주셔서 감사합니다. :D

스크롤 기능 사라졌나요?

안녕하세요, 송해석님. 새로운 Framer UI에 대해 문의주신걸까요?작년 5월에 프레이머는 디자인 프로토타이핑 툴에서 웹 퍼블리싱 툴로 업데이트를 진행했습니다. 따라서 UI에도 큰 변화가 있었는데요. 순서대로 설명드리자면,<ul><li>web - 온라인으로 화면을 배포하는 공간입니다</li><li>cms - 블로그와 같은 화면을 제작할 때 사용합니다.</li><li>canvas - 프로토타입을 제작하는 공간입니다!</li></ul>강의와 현 프로덕트 화면이 크게 차이가 나 혼란스러웠을텐데요, 빠른 시일내에 새로운 강의를 통해 찾아뵙도록 하겠습니다.강의봐주셔서 감사합니다. :D

프레이머 레이아웃 변경

안녕하세요, seonjukim님. 백그라운드 이미지 설정에 문제가 있으시군요.<code><Frame></code> 에서는 이미지를 로드할 경우, 텍스트를 덮는 형태로 구현됩니다. 따라서 아래와 같이 2개의 <code><Frame></code>을 구현하게 되면 이미지 위로 텍스트가 로드됩니다.<pre><code>import { Frame } from "framer"

export default function MyComponent(props) {
 return (
 <>
 <Frame
 position="absolute"
 width={"100%"}
 height={100}
 style={{ fontSize: 16, fontWeight: 800, color: "black" }}
 background={{
 src: props.image,
 }}
 ></Frame>
 <Frame width={"100%"} height={100} background={"none"}>
 {props.text}
 </Frame>
 </>
 )
}
</code></pre>다만, 위와 같은 형태로 마크업을 하게되면 디자인이 복잡해질수록 코드가 배로 복잡해집니다. 프레이머의 최신 라이브러리인 <code><motion.div></code>를 사용하면 아래와 같은 문법으로 작성이 가능해요.<pre><code>import { motion } from "framer-motion"

export default function MyComponent(props) {
 return (
 <motion.div
 style={{
 width: "100%",
 height: 100,
 fontSize: 16,
 fontWeight: 800,
 color: "black",
 position: "relative",
 backgroundImage: "url(" + props.image + ")"
 }}
 >
 {props.text}
 </motion.div>
 )
}</code></pre>강의를 촬영한 것도 1년 이상 지나 그동안 프레이머가 많이 업데이트가 되었는데요. 빠른 시일 내에 새로운 버전의 프레이머 강의를 공유드리도록 할게요.강의 봐주셔서 감사합니다. :)

Frame에 백그라운드이미지와 텍스트를 함께 설정하고 싶습니다.

안녕하세요 연남동이재용님, 새로운 프로젝트 생성에 어려움이 있군요.금번 Site 버전 업데이트로 인해 프레이머는 Web / CMS / Canvas라는 세 공간을 활용하도록 안내하고 있습니다. 기존 강의에서 설명한 부분은 Canvas 공간을 이용하면 되지만, 강의 중 일부 코드가 작동하지 않는 이슈로 인해 공지사항의 안내에 적힌것과 같이 <a target="_blank" rel="noopener noreferrer nofollow" href="http://framer.com/projects/new">http://framer.com/projects/new</a> 링크를 통해 접속을 요청드립니다.추가로, Site 프로젝트를 열었을 경우 Canvas 외 공간 및 primary를 삭제하는 방법은 제공하고 있지 않습니다. 불편하시겠지만 원활한 강의 진행을 위해 위와 같은 방법을 이용 부탁드립니다.강의 봐주셔서 감사합니다!

질문이 있어요

안녕하세요 annblue님, 프레이머 UI 변경때문에 문의를 주셨군요.
현재 프레이머는 Site라고 하는 업데이트로 인해 대시보드가 모두 바뀌었어요. 기존 서비스는 canvas라고 하는 공간에서 작업을 할 수 있도록 설정해 놓았습니다. 다만, 공지해 드린 것과 같이 기존 코드가 Site 버전에서 잘 돌아가지 않는 이슈를 발견했어요. <a href="http://framer.com/projects/new">http://framer.com/projects/new</a> 링크를 통해 접속하면 이전 모양의 캔버스를 활용할 수 있으니, 불편하시겠지만 여기서 작업을 이어나가 주시면 강의를 더 잘 들으실 수 있을 거에요. :)
강의 봐주셔서 감사합니다!&nbsp;&nbsp;

대시보드 인터페이스

안녕하세요 인프런 수강 님, drag-handle에 대해 문의주셨군요.
최근 프레이머의 Site Update로 인해 강의에 기재된 라이브러리가 작동하지 않는 이슈를 확인했어요.&nbsp;
하지만, http://framer.com/projects/new 링크를 통하면 '이전 버전 프레이머' 프로젝트를 생성할 수 있습니다.
번거로우시겠지만 해당 링크에서 코드를 작성해보시기 바랍니다.
강의 봐주셔서 감사합니다!

drag-handle에 대한 질문드립니다.

안녕하세요 periodic-table님, 강의 중 활용한 스크린에 대해 문의주셨군요.
강의 예제는 강의소개 본문 맨 아래 기재되어 있습니다. 보기 어려우실 수 있어 아래에 다시 기재하여 전달드려요.&nbsp; :)
<span style="box-sizing: inherit; color: #495057; font-weight: bold; font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; font-size: 16px; letter-spacing: -0.3px; background-color: #ffffff;">Figma :&nbsp;<a style="box-sizing: inherit; text-decoration-line: none; cursor: pointer; font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; font-size: 16px; letter-spacing: -0.3px; background-color: #ffffff;" href="https://www.figma.com/file/YKbkOiYWBVSNfUZXQY6ENP/jonbeo" target="_blank" rel="noopener">https://www.figma.com/file/YKbkOiYWBVSNfUZXQY6ENP/jonbeo</a><br style="box-sizing: inherit; color: #495057; font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; font-size: 16px; letter-spacing: -0.3px; background-color: #ffffff;" /><span style="box-sizing: inherit; color: #495057; font-weight: bold; font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; font-size: 16px; letter-spacing: -0.3px; background-color: #ffffff;">Framer :&nbsp;<a style="box-sizing: inherit; text-decoration-line: none; cursor: pointer; font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; font-size: 16px; letter-spacing: -0.3px; background-color: #ffffff;" href="https://framer.com/projects/xFiRc8OAux01S6z56OMj-ephJU" target="_blank" rel="noopener noreferrer">https://framer.com/projects/xFiRc8OAux01S6z56OMj-ephJU</a>
강의 봐주셔서 감사합니다!

스크린은 어디서가져오나요/

secretenglish님, 안녕하세요. 추후 강의 오픈소식때문에 문의를 주셨군요.
현재 강의를 제작한지 1년이 넘었다는 점, 그리고 프레이머 팀이 2번의 대규모 업데이트를 진행한 점으로 인해 현재 강의의 내용이 현 제품과 많이 달라진 점을 알고 있습니다.
언제가 될 지는 장담을 못드리지만.. 추후 강의를 제작할 경우 지금까지 강의를 구매해주신 분께 메리트를 줄 수 있는지에 대한 여부를 인프런 MD에게 문의해보도록 하겠습니다.
평생 무제한 맞습니다. :)
강의 들어주셔서 감사합니다.

문의사항

안녕하세요 jipgeria.s님. 변경된 화면때문에 문의를 주셨군요 :)
최근 프레이머는 Sites라는 서비스를 시행하면서 전반적인 UI를 업데이트한 상태입니다. 이제 신규 화면을 작성하면 이전과 같은 UI를 보기에는 힘들게 되었습니다.ㅠ
기존 프로토타입 기능은 [Canvas]라는 항목 안에서 작업 가능하도록 변경되었습니다. Canvas를 활성화한 후,&nbsp; 상단 Insert 탭을 클릭하면 기존 아이콘들의 기능이 Basic, Prototype에 나뉘어져 있는 모습을 확인하실 수 있을거에요.
<img src="https://cdn.inflearn.com/public/comments/5e161ede-12e1-49f7-8ea7-6e38cfc1d643/Screen Shot 2022-06-14 at 8.02.12 PM.png" />
<img src="https://cdn.inflearn.com/public/comments/3b616227-9cb2-442f-8465-da88f358b804/Screen Shot 2022-06-14 at 7.58.23 PM.png" />
툴이 자주 바뀌어 혼란스럽겠지만, 프레이머의 기본적인 기능은 바뀌지 않고 있어요. 이점 참고하시면 좀 더 원활하게 툴과 친해질 수 있을 것이라고 생각합니다. :)
강의 봐주셔서 감사합니다!

thomas

Posts