# interaction

21개의 포스트
post-thumbnail

What's new in CSS and UI: I/O 2023 Edition

최근 출시되었거나 곧 출시될 흥미롭고 영향력 있는 기능 20가지가 정리 되어있다 ! https://developer.chrome.com/en/blog/whats-new-css-ui-2023/?utm_source=oneoneone 컨테이너 쿼리, 스타일 쿼리, nth-of micro syntax, dynamic viewport units, wide-gamut color spaces, color-mix(), nesting, cascade layers, scoped styles, 삼각함수, 개별 변환 속성, 팝오버, 앵커 위치 지정, 셀렉트메뉴, 이산 속성 전환, 스크롤 기반 애니메이션, 뷰 전환 등 두고두고 보다가 적용해봐야게따 🫡

2023년 5월 17일
·
0개의 댓글
·
post-thumbnail

[모던 자바스크립트 튜토리얼] 2.6 prompt, alert, confirm을 이용한 상호작용

브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능인 alert, prompt, confirm에 대해서 알아보자 ❕ alert alert 함수는 사용자가 확인 버튼을 누를 때까지 메시지를 보여주는 창이 떠있게 된다. 메시지가 있는 작은 창을 모달창(modal window)이라고 한다. 모달이란 단어에는 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있다. 확인 버튼을 누르기 전까지 모달창 바깥의 버튼을 누른다거나 할 수 없다. 🖊 prompt 브라우저 제공 함수인 prompt 함수는 두 개의 인수를 가진다. 함수가 실행되면 텍스트 메시지와 입력 필드, 확인 및 취소 버튼이 있는 모달창을 띄워준다. default를 감싼느 대괄호는 이 매개변수가 필수가

2023년 2월 20일
·
0개의 댓글
·
post-thumbnail

Browser Scroll Height 계산해보기

인터랙션에 관한 공부를 하다가 섹션별 높이에 대한 이벤트처리가 필요했고 원하는 높이에서 이벤트가 발생될 수 있게 브라우저 scroll height를 구해보자 그림으로 표현한 전체 구조 설명 빨간 테두리는 전체 구간이고 검은 테두리가 사용자에게 보여지는 화면이다.총 네개의 Section 으로 나누어져있고 현재 Section 2 를 기준으로 60% 정도 스크롤이 진행됐다.각 Section 마다 실행되는 이벤트가 다를 것이고, 브라우저가의 기준선이 포함되어 있

2023년 1월 10일
·
0개의 댓글
·
post-thumbnail

[interaction] 동영상 스크롤 감응 구현하기/requestAnimationFrame, setInterval 차이점과 장단점

스크롤에 따른 동영상 재생을 구현한다. 옵션에 따라 재생 속도 및 프레임 조절한다. 원리 설명 requestAnimationFrame requestAnimationFrame은 전달한 함수를 프레임 생성 초기 단계에 맞춰 실행시킵니다. setInterval이나 setTimeout은 프레임을 신경쓰지 않고 동작하기 때문에, requestAnimationFrame을 사용함으로써 애니메이션을 더 부드럽게 동작시킬 수 있습니다. requestAnimationFrame의 장점 페이지가 비활성 상태이면 페이지의 화면 그리기 작업도 브라우저에 의해 일시 중지되므로 브라우저를 따르는 requestAnimationFrame도 렌더링을 중지합니다. 이에 따라 CPU 리소스와 배터리 수명을 낭비하지 않게됩니다. (setInterval은 비활성 상태여도 백그라운드에서 계속 실행됨) 브라우저가 언제 업데이트를 할지 알게해줌으로써 프레임(frame) 손실을 방지해줌.

2022년 12월 8일
·
0개의 댓글
·

페이지 스크롤에 역행하기 또는 순행하기

이 이야기는 반응형 레이아웃 디자인을 위한 빌드임을 먼저 알리고 시작한다.

2022년 7월 10일
·
0개의 댓글
·
post-thumbnail

React-Native(2.loagApp with animated, interaction)

npm i @types/styled-components npm i @types/styled-components-react-native 노가다로 animated 하기 ~ 라이버러리 없이 animated 작업할려면 이렇게나 힘듦.

2022년 4월 11일
·
0개의 댓글
·
post-thumbnail

[Flutter] 카카오 웹툰, 뷰어 인터렉션

카카오 웹툰, 안드로이드에서만 제공하는 인터렉션은 무엇일까? 카카오 웹툰 웹툰 플랫폼 중 단연 가장 이쁘다고 할 수 있는 이번 포스트에서는 해당 앱 속 인터렉션에 대해 작성하려한다. 개발할 내용은 웹툰 뷰어 내부에서 해당 웹툰의 목록을 볼 수 있게 해주는 기능이다. .gif) > 아비무쌍 188화 中 위와 같이 동작하는 기능인데 처음 접했을 때 와우했던 포인트 중 하나이다. 디자인 대격변을 하면서 다른 디자인들은 과하다. 라고 생각할 수 있지만 이 기능은 디자인뿐만 아니라 사용성 또한 높다. (_UX

2021년 11월 30일
·
12개의 댓글
·
post-thumbnail

[Flutter] 땡기는 인터렉션

이번 포스트에서는 배달의 민족에서 사용되고 있는 '땡겨요' 인터렉션을 구현해볼 것이다. 배민, 땡겨요 > 배달의민족 메인화면 > 배달의민족 메인화면의 땡겨요 인터렉션 배민의 메인화면에서 화면을 밑으로 당기게되면 이번 포스트에서 다룰 주제가 나타난다. 원래 화면을 위에서 아래로 당기는 행위는 pull to refresh 라고도 부르는데 이 기능은 보통 화면을 새로고침하는 기능을 한다. 배달의 민족은 여기에 당기다와 땡기다의 언어유희를 사용하여 새로고

2021년 11월 26일
·
0개의 댓글
·
post-thumbnail

[Flutter] 지도 내 위치 선택 인터렉션

이번 포스트에서는 여러 앱에서 내 위치를 선택할 때 사용하는 마커(핀) 인터렉션에 대해 알아보려고 한다. 지도를 사용하는 앱은 굉장히 많고, 많은 앱들에서 현재 위치를 선택할 수 있는 기능을 제공한다. 현재 위치를 선택하는 화면에는 어떤 인터렉션이 숨어있을까? 많은 앱이 있겠지만 쏘카와 배달의민족 이미지를 준비했다. 쏘카 > 쏘카에서 내 위치를 선택하는 핀 배달의민족 > 배달의민족에서 내 위치를 선택하는

2021년 11월 16일
·
1개의 댓글
·
post-thumbnail

[Flutter] 인스타 라이브의 좋아요 인터렉션

인스타 라이브의 좋아요 인터렉션을 구현해보려 한다. 구현 목표 구현하려는 기능은 다음과 같다. 버튼을 눌렀을 때, 좋아요 아이콘이 생성 생성된 아이콘이 위로 올라가다 사라짐 버튼을 길게 눌렀을 때, 좋아요 아이콘이 일정시간마다 생김 생성된 아이콘이 위로 올라가다 사라짐. 미리보기 이 포스트에 기술된 내용에 조금만 더 보태면 아래와 같은 인터렉션을 구현할 수 있다. 개발 터치 이벤트 감지 터치 이벤트를 감지하기 위해 GestureDetector 위젯을 사용하였다. 아이콘 생성 버튼을 터치할 때, 좋아요 아이콘이 생성되어 사라지게 하기 위해서는

2021년 11월 6일
·
6개의 댓글
·
post-thumbnail

[Flutter] Clone App - 차이

오늘은 내가 자주 쓰고 있는 앱들 중 하나인 차이 앱을 클론해보려 한다. 클론 앱이라고 거창하게 표현했지만 사실 그냥 메인화면 인터렉션 흉내 정도이다. > 최근 차이 앱 UI/UX가 변경되었는데, 변경된 기념으로... 차이 앱에서 클론할 영역은 메인화면으로 잡았다. 어려운 레이아웃이나 디자인이 없어서 금방 할 수 있었다. 차이 메인화면 구조 변경된 메인 화면은 상단 중단 하단 크게 세 영역으로 나뉘어져 있다. 상단 : 번개와 카드 중단 : 할인중인 목록 하단 : 메뉴 및 히스토리 메인화면 개발 상단과 중단에 해당하는 부분까지만 개발해보려한다. 백그라운드 백그라운드는 linear gradient가 적용되어 있다. 색상은 투명한 검정 -> 검정 으

2021년 10월 22일
·
0개의 댓글
·
post-thumbnail

플립 시계 만들기 with JS (2020)

플립 시계 만들기 아날로그를 닮고 싶은 디지털 🕰 숫자판이 틱,틱 소리를 내며 가벼이 넘어간다. 지금 이 순간 흐르는 시간이 내는 소리다. 우리를 둘러싼 수 많은 장치들이 아날로그에서 디지털로 바뀌어 버린것도 이젠 오래 전이 되어버렸다. 시대가 변하고 우리는

2021년 9월 4일
·
4개의 댓글
·
post-thumbnail

[Flutter] 다음웹툰 Interaction 따라하기...(2)

이번 포스트는 지난 [다음웹

2021년 5월 26일
·
0개의 댓글
·
post-thumbnail

[Flutter] 다음웹툰 Interaction 따라하기...(1)

이번 포스트는 다음웹툰의 I

2021년 5월 5일
·
0개의 댓글
·

[TID] 2021.04.19

👩🏻‍💻 What do I want to do today? 클론 코딩 강의 - [고해상도 비디오 인터렉션] 챕터 진입 velog TID 출간하기 velog 클론코딩 관련 글 작성 시작하기 오늘치 작업분 commit 하기 4월 계획 세워서 ethen에게 컨펌받기 집중 안될 때 notion에 글 옮겨적기 ✏️ How was I today? 📌 STUDY 강의 내용을 따라서 이해하면서 작성하려다보니 계획한만큼 듣지 못했다.. 그래도 진도 빼는것 보다는 내용 이해가 먼저라 생각했기 때문에, 너무 붙들지 않는 선에서 들은 것 같다. 강의 내용을 notion에 정리하면서 듣고싶었는데, js작업을 시작하다 보니 정리하기가 쉽지가 않다. 작업이 끝나면 한번 훑어보긴 해야할 것 같다. scroll interaction 챕터까지 강의를 마쳤다. 새로운 내용들을 알아가는건 여전히 어렵지만 만들어지는 과정을 보는건 아

2021년 4월 19일
·
0개의 댓글
·
post-thumbnail

[TID] 2021.04.15

몇개월만에 쓰는 공부일지인지... 새로운 마음으로 작성방식도 변경해보기로 했다. 우선 매일 아침마다 TODO LIST를 작성하고 밤에 커밋하면서 목표치를 얼마나 해냈는지 체크해나가기로. 매일의 나를 뒤돌아보는 것과, 내일의 마음가짐은 일기처럼 계속 쓸 예정 앞으로 한달정도의 시간동안엔 공격적으로 공부를 해봐야겠다. 👩🏻‍💻What do I want to do today? [Inflearn] Apple clone coding-interaction 강의 듣기 (우선 오늘은 목표치 없이 듣는데까지 들어보기) Notion 사용해보기 velog 작성하기 이번주 강의 계획 세우기(주말 포함) 4월달 계획 세워서 ethen에게 컨펌받기 강의 들으면

2021년 4월 15일
·
0개의 댓글
·
post-thumbnail

[Flutter] Hero + zoom out (w/ OverflowBox)

이번 포스트에서는 Flutter에서 제공하는 강력한 위젯 중 하나인 Hero 위젯을 다뤄보려한다. normal 기본 히어로 위젯을 사용하면 위와 같이 부드러운 애니메이션으로 동작한다. > 하지만, 좀 더 인터랙티브한 경험을 전달하기 위해서 zoom-out이 되는 효과 주기로 한다. goals

2021년 2월 8일
·
0개의 댓글
·
post-thumbnail

[Bouncing Ball] Interactions만들기 -mouseover시 속도 변경, 이미지 집어서 드래그

이번 글에서 다룰 내용 브라우저 창에 마우스 호버하면(mouseover) 슬로우모션으로 애니메이션 실행 마우스로 움직이는 공 잡아서 드래그 mousedown, mousemove, mouseup, mouseout 브라우저 창에 마우스 호버하면 슬로우모션으로 애니메이션 실행 mouseover 로 호버했을 때 공들의 속도를 늦추기 mouseout 으로 마우스가 브라우저 밖으로 나갔을 때 속도 원상복귀 브라우저 창에 마우스를 호버하면 슬로우모션으로 공이 움직이는 것을 확인할 수 있다 마우스로 움직이는 공 잡아서 드래그 > 마우스로 움직이는 공을 클릭 클릭한 공은 마우스가 움직이는 대로 드래그될 것 공을 놓는 순간 원래 움직이던 방향으로 이어서 이동 interaction() interaction() 함수에서 mousedown, mouseup, mouseout을 관리 mousedown은 마우스 클릭한

2021년 2월 7일
·
0개의 댓글
·
post-thumbnail

[Web Architecture] Interaction with server

지금까지는 자바스크립트로 코드를 작성해보고, HTML과 CSS, 그리고 아직도 완벽하게 이해하지 못한 DOM 조작으로 웹페이지를 나름 구색을 갖추어서 흉내내는 작업을 했다. 그런데 이제 이머시브 과정에서는 서버(server)와 통신해서 진짜 애플리케이션을 만들어본다고 한다. 그러기 위해서 이번주 스프린트부터는 웹이 어떻게 돌아가는지 대략적으로 개념학습을 하는 시간을 가졌다. 개인적으로는 마우스로 뭔가를 클릭하면 컴퓨터가 모니터에 원하는 것을 '뙇!'하고 띄우는 것만 아무렇지 않게 봤었기때문에 접하는 내용 하나하나가 굉장히 생소했다. 🐸 Web Architecture 를 구성하는 3가지 [이미지출처: Web Application Architecture – Its Components &

2020년 11월 12일
·
0개의 댓글
·
post-thumbnail

Canvas Mouse Interaction

🥴 캔버스를 활용해 마우스를 이용한 간단한 인터랙션을 구현해봅시다. https://velog.io/@kimbyungchan/canvas-animation 이전글을 참고하시면 기본적인 구조에대해 더 쉽게 이해하실수있습니다. 기존 Vector class에 두 점의 길이를 구하는 distance함수를 추가해줍니다. 기본적으로 싱글톤 패턴에 사용할 instance 변수와, Circle을 일정한 간격으로 추가해주었습니다.

2020년 11월 11일
·
0개의 댓글
·