![Apollo Graphic](/img/default-banner.jpg)
- Видео 38
- Просмотров 214 965
Apollo Graphic
Добавлен 16 июл 2017
#노코드 디자인 툴 학습을 위한 무료 리소스.
-
doolisound@gmail.com
-
doolisound@gmail.com
웹플로우 인터렉션: 텍스트&로고 무한반복
이번 영상에서는 웹플로우에서 무한반복하는 로고배너와 텍스트를 만들어 보는 영상입니다.
웹플로우 바로가기: t.ly/50ezx
예제: apollo-tutorial-series.webflow.io/infinite-animation
0:00 예제설명
1:11 텍스트 무한 스핀
5:13 로고 배너 무한 반복
before body tag 코드:
codepen.io/Apollo-Graphic/pen/ExBxXYx
웹플로우 바로가기: t.ly/50ezx
예제: apollo-tutorial-series.webflow.io/infinite-animation
0:00 예제설명
1:11 텍스트 무한 스핀
5:13 로고 배너 무한 반복
before body tag 코드:
codepen.io/Apollo-Graphic/pen/ExBxXYx
Просмотров: 43
Видео
웹플로우(Webflow) 인터렉션: 끈적 버튼
Просмотров 832 месяца назад
이번영상은 웹플로우에서 자석같이 마우스를 따라오고 범위밖에서는 제자리로 돌아오는 끈적한 버튼을 만들어보는 영상입니다. 웹플로우 바로가기: t.ly/50ezx 예제: apollo-tutorial-series.webflow.io/sticky-button
피그마 투 웹플로우 앱으로 디자인파일 쉽게 가져오기 (ft.앱리뷰)
Просмотров 3173 месяца назад
이번 영상에서는 피그마에서 웹플로우로 랜딩 페이지, 디자인 시스템을 불러오는 방법을 알아보겠습니다. 또 제가 사용해보고 느낀 유용한 점과 불편한 점도 공유할게요. 0:00 인트로 0:17 예제 설명 0:49 피그마 플러그인 연결 2:42 웹플로우 앱 연결 7:11 리뷰 웹플로우 바로가기: t.ly/50ezx 피그마 커뮤니티 웹플로우랩: www.figma.com/@webflow_labs
웹플로우 퀵-스택 으로 만드는 반응형 그리드 레이아웃
Просмотров 2068 месяцев назад
이번 튜토리얼에서는 웹플로우 퀵스택과 그리드 엘리멘트를 비교하고, 퀵스택을 활용하여 반응형 그리드 레이아웃을 구현해보겠습니다. 웹플로우 바로가기: t.ly/50ezx 🔍 내용: 0:00 영상소개 1:25 Quick Stack 와 Grid 비교 4:15 예제 만들기 1: 그리드 레이아웃 22:33 예제 만들기 2: 반응형 그리드 적용하기 예제: apollo-tutorial-series.webflow.io/responsive-grid-layout 💻 복제가능한 프로젝트: webflow.com/made-in-webflow/website/bentobox-resume #노코드 #웹디자인 #cssgrid
Webflow 인터렉션: 3D 오브젝트 스크롤 인터렉션
Просмотров 42210 месяцев назад
이번영상은 이번 웹플로우 이벤트에서 처음소개된 Spline 연동을 사용해 간단하게 3d 파일을 불러오고 인터랙션을 적용해보는 영상입니다. 웹플로우 바로가기: t.ly/50ezx 0:00 예제 소개 0:36 Spline 설정 2:37 Webflow에서 Spline 링크 추가 3:55 인터렉션 적용 11:21 끝 완성된 사이트: apollo-tutorial-series.webflow.io/spline-integration #노코드
라이브 마우스 트랙킹 인터렉션 웹플로우에 추가하기
Просмотров 189Год назад
이번 영상은 라이브툴을 사용해서 로고에있는 눈동자가 마우스 커서를 따라 움직이게 적용하고 웹플로우에서 적용시키는 부분까지 보여드릴려고 합니다. 0:00 라이브 7:27 웹플로우 로고파일 다운링크: drive.google.com/drive/folders/14vuHTL-jyD-nQ-eV83IHg_0tH33YgOqu?usp=sharing 라이브 공유링크: rive.app/s/jSYGDuZie0iRRP273Lonuw/ 웹플로우 공유링크: apollos-tutorial-page.webflow.io/mouse-tracking-interaction-2 #노코드 #rive
Rive 마우스 클릭 토글 인터렉션
Просмотров 228Год назад
이번 영상은 Rive 에서 토글 스위치를 만들어보면서 스테이트 머신을 사용해 간단한 인터렉션을 적용해보는 영상입니다. rive.app/community/7477-14365-toggle-button/ 0:00 디자인 3:40 애니메이션 11:18 스테이트 머신 21:38 공유 #노코드 #rive
로티파일보다 더 강력한 툴 Rive 소개
Просмотров 740Год назад
이번 영상은 RIVE 라는 인터렉티브 디자인 툴에대해 소개하는 영상입니다. 0:00 라이브 소개 1:40 장점 2:48 인터페이스 소개 6:25 다음영상 소개 rive.app/ #Rive #노코드
Webflow 인터렉션: 마우스 오버
Просмотров 365Год назад
이번 영상은 웹플로우에 기본적인 인터렉션 기능해대해 알아보고, 구체적으로 mouse hover와 mouse click 예제를 통해서 인터렉션 적용하는법을 배워보는 영상입니다. 웹플로우 바로가기: t.ly/50ezx 0:00 인터렉션 설명 2:53 인터렉션 적용 10:03 Easing 종류 설명 웹플로우 Easing 비교 링크: webflow.com/made-in-webflow/website/Ease-y-Peasy-Easily-compare-Webflows-built-in-easing-options #노코드
Webflow 인터렉션: 가로 스크롤
Просмотров 864Год назад
이번영상은 Webflow를 사용하여 간단한 가로 스크롤 웹 사이트를 만들어보는 영상입니다. 웹플로우 바로가기: t.ly/50ezx 0:00 구성 설명 1:02 클래스 추가 11:22 인터렉션 적용 예제 링크: apollo-tutorial-series.webflow.io/ #노코드
Webflow 로 설명하는 반응형 웹 css 단위
Просмотров 8373 года назад
이번 영상은 웹플로우로 반응형 웹을 만들때 쓰이는 css 단위에 대해 설명하는 영상입니다. 웹플로우 바로가기: t.ly/50ezx 00:10 설명할 css 유닛 01:26 첫번째 예제: px, %, vw 03:00 두번째 예제: em, rem 05:10 세번째 예제: px %, vw 07:48 네번째 예제: px em 09:52 다섯번째 예제: em #노코드
어도비 Xd 대시 자동 애니메이트
Просмотров 8393 года назад
이번 영상은 어도비 Xd 에서 대쉬와 갭을 이용해서 업로드 버튼에 자동 애니메이트를 적용해보는 영상입니다. 0:00 미리보기 0:27 첫번재 아트보드 - 업로드 버튼 4:15 두번째 아트보드 - 클릭 인터렉션 5:05 세번째 아트보드 - 로딩 에니메이션 8:00 네번째 아트보드 - 완료 체크마크 10:12 프로토타입 탭 - 인턴렉션 적용 - 프로젝트 파일 다운받기: gum.co/NKPqI 완성된 프로젝트 미리보기: xd.adobe.com/view/94aa71c1-161b-4ccf-ba8d-05d9308eb247-c1f9/ - 어도비 Xd 새로운 기능: www.adobe.com/kr/products/xd/features/whats-new.html - Xd 무료 다운받기: www.adobe.com/prod...
Webflow 인터렉션: 텍스트 배경 & 아웃라인
Просмотров 6403 года назад
이번 영상은 텍스트 배경과 아웃라인을 사용해서 인터렉션을 적용해보는 영상입니다. 웹플로우 바로가기: t.ly/50ezx 0:10 영상설명 0:50 텍스트 배경 적용 5:01 텍스트 아웃라인 추가 11:39 스크롤 애니메이션 적용 14:03 마우스 커서 인터렉션 적용 embed 코드 공유: .heading.outline { -webkit-text-stroke: 3px #208859;} 완성된 사이트: apollo-tutorial-series.webflow.io/styling-text - 배달의민족 한나는11살체 무료폰트: font.woowahan.com/hanna11yrs/ Image Credit to Julia Solonina and Penguinuhh: unsplash.com/photos/JWziE8...
어도비 Xd 스택 & 스크롤 구릅 | Stacks & Scroll Group Update
Просмотров 7194 года назад
어도비 Xd 스택 & 스크롤 구릅 | Stacks & Scroll Group Update
Webflow 로 코딩없이 반응형 웹개발하기 (2/2) | Webflow Simple Responsive Page 2
Просмотров 6 тыс.4 года назад
Webflow 로 코딩없이 반응형 웹개발하기 (2/2) | Webflow Simple Responsive Page 2
Webflow 로 코딩없이 반응형 웹개발하기 (1/2) | Webflow Simple Responsive Page 1
Просмотров 14 тыс.4 года назад
Webflow 로 코딩없이 반응형 웹개발하기 (1/2) | Webflow Simple Responsive Page 1
어도비 Xd 와 Dimension 3D 오브젝트 사용해서 스피드 에디팅 | Adobe Xd Landing Page Speed Art
Просмотров 3 тыс.4 года назад
어도비 Xd 와 Dimension 3D 오브젝트 사용해서 스피드 에디팅 | Adobe Xd Landing Page Speed Art
어도비 Xd 오디오 재생 + 고정링크 | Audio Playback + Anchor Link with Adobe Xd
Просмотров 1,5 тыс.4 года назад
어도비 Xd 오디오 재생 고정링크 | Audio Playback Anchor Link with Adobe Xd
어도비 Xd 컴포넌트 스테이트 | Using Component States with Adobe Xd
Просмотров 5424 года назад
어도비 Xd 컴포넌트 스테이트 | Using Component States with Adobe Xd
일러스트레이터로 앱 아이콘 만들기 | App Icon Design Process with Illustrator
Просмотров 2,7 тыс.5 лет назад
일러스트레이터로 앱 아이콘 만들기 | App Icon Design Process with Illustrator
어도비 Xd 매스터 컴포넌트 | Adobe Xd Master Component
Просмотров 1,1 тыс.5 лет назад
어도비 Xd 매스터 컴포넌트 | Adobe Xd Master Component
영상 감사합니다.
포토샵에서 열리긴하는데 안에 요소가 없이 그냥 빈 깡통으로 열립니다. 어떻게 해야할까요....
bottom nav가 하단으로 fixed가 안 되는데 body의 높이 설정이 없어서 그럴까요?
유투브 쇼츠가 날 살리는구나 좋은정보 압도적 감사링합니다
혹시 에프터 이펙트에 일러스트 파일 불러와서 레이어에 퍼핏툴이 안먹는 이유가 있나요 ?
일러파일들 에펙에 불러와서 Shape Layer (모양 레이어)로 변환을 하셨는지요?
강의 잘보고 있습니다! 에니메이션 작업을 하는중에 highlight에 에니메이션중 스케일 넣을때 scale칸이 x까지만 나오고 끝이 밑에 더 나오지 않습니다, 이 오류에 대해 아는게 있나요?
scale 값을 정하는 구간에 x축 칸만 나오고 나머지 y 와 z칸이 안나오시는건가요? 버그인것 같은데.. 리로드 해도 계속그러면 서포트 팀에게 연락을 하실수 있습니다.
@@ApolloGraphic 감사합니다! 해결했습니다!
감사합니다. 많은 도움 되고 있습니다
혹시 div블럭으로 list블럭을 사용하지 않고 여러번 사용해 대채할 수 있나요? div블럭을 여러게 만드는 것이 번거로워서 list블럭으로 한거지요?
네 좋은 질문이네요. 맞습니다, 리스트가 간단한 네비 메뉴로 사용하기 편해서 썻고 전부 div로 설정하셔도 됩니다.
@@ApolloGraphic 답변 감사합니다! 정말 아폴로 그래픽님 덕분에 많이 배우고 있어요!
웹플로우 영상 너무 좋아요
감사합니다, 앞으로 웹플로우 영상 더 만들어 보려구요 :)
웹플로우 사용하면 아래 질문 답변보니깐 "html/css/js 전부 export가능합니다. 타 호스팅에서 바로 업로드 해서 쓰실수 있어요. " 하셨는데요. 그럼 카페24 호스팅으로 연결은 불가능한가요? 그리고 비용이 webflow.com/pricing 여기 있는 cms 비용만 내면 되는 건지 추가 비용이 드는지 궁금하네요 ^^
안녕하세요 코디에 ㅋ 자도 모르는 코린이 인데요 ~ 질문이 있습니다 ! 그럼 웹앱을 만들때 일일이 픽셀을 수동으로 어림잡아 고치는 거랑, %나VW,VH를 쓰는거는 후자가 장점이 명확할것 같은데 꼭 픽셀로 화면에 맞게 수동으로 작업하는 이유가 있나요?
정말 좋은 질문이네요~ 상황에 따라 다르겠지만.. 저도 픽셀만 쓰던때가 있었는데 요즘은 px은 아이콘이나 사진이 크기가 변하면 안되는 경우 간혹 사용하고요. %는 패딩,마진, 갭을 설정할때 주로 씁니다. vw vh은 화면 전체를 커버하는 한 섹션을 만들때 쓰고 rem는 폰트사이즈 그리고 em은 폰트에 라인 하이트 또 버튼 패딩에 쓰기도 합니다. 오래전에 웹사이트를 처음 픽셀로 다 만들었다면, 계속해서 픽셀로 업데이트 하는게 편한 경우도 있겠네요.
아폴로님! 덕분에 하나씩 다 영상 보고 스킬업 중이에요! 너무 감사드립니다!
감사합니다!!
웹플로우 table 작업 중에 thead를 고정시키는 작업 할 수 있나요?
제가 알기로 현제 웹플로 툴에서 table 을지원하고 있지 않은데, "Embed" 엘리멘트를 추가하고 커스텀 코드를 직접 입력하셔서 테이블을 추가 하고 스타일링 하실 수 있습니다.
와 그저 빛입니다 !! 👍👍👍👍👍👍
진짜 감사합니다!!!! gif 모션 깨끗하게 만드는데 도움되었습니다!!
Rive 처음 배우는데 첫 영상부터 이번 영상까지 너무 많은 도움이 되었습니다! 감사합니다~
찾고있던 강의입니다 친절한 설명 감사합니다!
안녕하세요 영상 너무 잘 보았습니다 ! 감사합디다 !!! 영상 보면서 튜토리얼 따라해봤는데 저는 스크롤을 위로 올리면 오브제 크기가 끝도 없이 커지네요 ㅠㅠ 왜 그런걸까요 ? ㅠㅠ
감사합니다. 이상하네요.. 인터렉션 적용하실때 레이어 선택하시고 스크롤 액션 추가할때 "Scale"을 선택하신건 아니죠? Integration 밑에 "Spline" 선택해주셔야해요. 그리고 인터렉션 아래에 로테이션 정하실때 object(layer)을 선택하셔야 각각 다른 로테이션 값을 처음 0% 와 마지막 100%에 지정해주셔야합니다. 웹플로우에서 추가한지 얼마 안되서 제가 할때 작은 버그들이 있긴있더라구요
안녕하세요 답글 감사합니다 ! 아뇨 ㅠㅠ Spline 제대로 설정했는데도 그러네요 ㅠㅠ 원인을 모르겠어요,,, 결국 해당 인터렉션 말고 다른걸 쓰기로 해서 다행이긴한데 답답하네요 ㅠㅠ 답변 주셔서 감사합니다 !!! 좋은 하루 보내세요@@ApolloGraphic
좋은 방법 알려주셔서 감사해요 구독눌렀습니다~ ^^
포토샵에서 mp4, mov 파일 둘다 안열려요 ㅠㅠ 심지어 렌더 하기 누르기만하면 티비 화면 조정된걸로만영상에 나옵니다...ㅠ (새벽에 티비틀엇을때 빨간색초록색노란색 나오던 원색 화면이요 ㅠㅠ )
와... 정말 첨부터 일케 자세하게 웹플로우로 사이트 뚝딱 해 주셔서 정말 큰 도움이 되었습니다. 덕분에 프론트엔드 유저 인터페이스 코딩에 대한 이해가 한 방에 되었습니다. 레전드이십니다 형님, 감사합니다:)
와 한방에 되었다니 보람이 있네요 저도 웹프로로 코딩을 더 쉽게 이해하게되서 첨에 시작하게 됬어요😀
@@ApolloGraphic 감사합니다^^b
자세한 설명 감사합니다.^^
감사합니다!
다음 강의 기대합니다!
😄 네 곧 올릴게요!
강의 너무 감사합니다~!
덕분에 투명배경의 gif를 해결했습니다. 그런데 투명도가 있어야 하는 반투명색상 영역은 매트에 흰색선택 시 모두 흰배경이 채워진채로 내보내지더라구요. 매트를 없음으로 바꾸니 해당영역이 아에 없어지듯이..... 해결방법이 없을까요?? (어플리케이션 지도의 내위치 나타내는 마커 아이콘을 만들고있어요)
모바일 기준으로 만들어야 웹도 잘 나오는 것으로 알고 있었는데요!
맞아요 👍 모바일 트래픽이 웹보다 늘면서 mobile first 디자인으로 하는게 늘고 있는갓 같아요. 프로젝트마다 다르겠지만, 저는 디자인할때는 웹으로 먼저 하는것같아요. 이유는 웹으로 여러가지 인터렉션들을 먼저 추가하고 디바이스 사이즈를 내려가면서 기능들을 하나씩빼는게, 모바일부터 기능들을 없이 시작하고 점점 기능을 추가하는것 보다 쉬운것 같아서요.
저기 이것저것 만저보는데 글자가 스페이스바 누르면 이상하게 꼬이네요 이건 왜 그런건강
안녕하세요 영상감사합니다 웹플로우 영상이 없어서 (공식사이트는 전부 영어ㅠㅠ) 고생하고있었는데 덕분에 기초기부터 다지는 기분입니다! 궁금한점이 하나 생겼는데 왜 이번에는 DIV BOX가 아니라 CONTAINOR박스에 제작하셨을까요?
감사합니다😀 아 웹플로에서 container이 다른 점은 컨테이너는 프리셋 템플렛이라 기본적으로 길이와 margin이 세팅이 되어있어서 금방 사용하기 편해서 예제에서 사용했습니다. 하지만 보통은 아무것도 적용되지 않은 div box를 사용합니다.
워드프레스처럼 웹호스팅 비용을 개인이 부담하고 사용하나요?
ruclips.net/video/mMCnrl7JCgs/видео.html 네 웹플로 통해서 호스팅 하실수 있고 코딩을 추출? 하셔서 다른 호스팅서비스를 이용해서 사용하실 수 도 있습니다. Site Plan 가격: webflow.com/pricing
@@ApolloGraphic 네 이해했습니다 감사합니다
선생님... 먼저 좋은영상 정말감사합니다 그런데... 이거 다만들고나서 저장하고 링크를 만드는건 어떻게하나요? ㅜㅜ
자동저장됩니다. 위에 초록체크마크가 뜨면 자동 저장 된겁니다. 10-20초마다 자동으로 저장되는 것 같고요, 50번째 자동저장할때 자동으로 백업도 같이 한다고 하네요. 세팅에서 예전저장 포인트로 돌아 가실 수 있어요. 링크는 오른쪽 위에 로켓아이콘 클릭하시고 원하시는 도메인 선택하고 Publish 버튼 누르시면 링크가 뜰거예요.
덕분에 gif 파일 잘 만들었습니다. 감사합니다
와, HTML, CSS 코딩수업으로 주구장창 하드코딩만해서 너무 힘들었어요.ㅠㅠ 우연히 웹플로우를 추천받아서 배워보려고 검색해서 들어왔는데요. 이렇게 바로 직관적으로 보면서 할 수 있는데, 웹플로우는 약간 뭐랄까.... 코딩이 시각화된 느낌이라서 코딩수업듣고 웹플로우 강좌들으니 정말 재밌네요... 그런데 이미지는 따로 보정하신걸까요? ㅎㅎ 따라해보니 백그라운드가 화이트가아니라서 조정하신건지 궁금합니다~
네 ㅎㅎ 코딩이 시각화된 느낌 공감합니다ruclips.net/video/HbW32X_SuCU/видео.html 여기보면 이미지 만드는 과정이 나옵니다.
정말 감사합니다. 작업하는 데 유용하게 사용되었습니다!
강의가 도움이 되었어요! 그런데 그림 바깥쪽에 흰선이 생겨서 변환 되는데 왜 그럴까요? ㅠㅠ 그림에 테두리 주지 않았거든요...
포토샵으로 내보내셨나요?
영상 감사합니다 웹플로우 강의 탑입니다 ㅠㅠ
반복그리드를 누르면 마스터가 유지되지 않고 계속 없어지는데 ㅜ 혹시 왜그러는지 아실까요 ?? 그룹후, 그룹전 다 해봤는데 안되요 ㅜ 그리고 마스터가 아니라 메인이라고 표시되는데 업데이트가 된건가요 ?
반복 그리드를 만들고 난 후에 컴포넌트에 추가 하시면 될거에요. 네, 마스터에서 메인으로 바뀐것 같아요.
한국식 PG 결제가 적용된 이커머스 사이트는 지금도 만들기 어려운 거죠? 2016~17년 경에 시도했는데 놀라운 수준의 사이트들을 만들 수 있음에도, 결제 문제로 포기하게 되더라고요.
현재로써는 한국식 결제는 불가능한걸로 알고있습니다. weblfow wishlsit라고 기능추가를 제안할 수 있는 곳이 있는데 이것도 보장이 없어서, 디자인을 하신후에 코드로 Export하셔서 직접 코딩으로 결제 시스템을 추가 할 수 있다면 가능할지 모르겠네요.
포토샵에서 동영상파일 불러오기 오류뜨시는 분들 finder - 응용프로그램 - 어도비 포토샵 - 우클릭 - 정보보기 - Rosetta사용하여열기 체크 후 포토샵 재실행하면 됩니다!
말이 너무 느려요
왜,..,왜...배경을 깔아도 미디어로 가면 배경이 검은색으로 바뀔까요...ㅠ..????
감사합니다ㅜㅜ첨부터끝까지 다 따라햇어요 ...과제가 넘 어려웠는데 덕분에 잘 해냈어요 생명의은인.ㅋㅋㅋㅋㅋ구독하고갑니다아!
최곱니다... 감사합니다.... 어도비 짜증나지만 어쩔 수 없이 편하다... 최고.... 선생님 감사
두번째 방법대로 투명으로 뽑으려는데, 포토샵에서 열리지 않아요 ㅠㅠ h.264로 출력하는 옵션 자체가 안보이는데 어떻게 할 수 있나요?
포토샵에서 h.264 로 출력하실려면 3:40 에서 "Render Video..." 를 선택하시면 됩니다.
저는 5027 :: 12 라는 에러가 떠요...어떻게 해야 하나요?
소프트웨어를 최신 버전으로 업뎃하시거나 재설치 해보라고 하네요. www.solvusoft.com/en/errors/runtime-errors/adobe-systems-inc/adobe-after-effects/5027-12-after-effects-error-5027-12/
2번째 방법에서 RGB+ Alpha 비활성화 되신분들 해결방법 우측 Format Options에서 Animation 으로 변경하시면 됩니다!
나이스~ 감사합니다.
Icons 4 Design 기업도 무료로 사용할 수 있나요?
네, 무료 아이콘들만 모아논거라고 하네요. emsoftware.com/xdplugins/icons-4-design/
제가 원하던 영상이에요!!!! 감사합니다.
안녕하세요! 올려주신 강의 보면서 웹플로우 잘 배워가고 있습니다! 질문이 있어서 댓글 남깁니다! 웹플로우에서 이미지를 넣고 조정하는데, 변환형으로 모니터 크기에 맞춰 변환 할깨마다 이미지 비율이 틀어지는데 혹시 고정한 상태로 비율 조정하는 방법이 있을까요??
안녕하세요! 네 저도 그런 경우가 많아서 CSS 유닛을 공부해봤어요. 이 영상 참고해보세요. ruclips.net/video/agZ0GmsXRdQ/видео.html