테오의 스프린트 6기: 회고

teo.yu·2022년 4월 24일

프롤로그

오랜만에 스프린트를 다시 시작하게 되었습니다. 5일간 지도그리기 - 스케치 - 결정 - 개발 - 테스트로 이어지는 과정을 통해서 짧은 시간에 결과물을 만들어 보는 구글 스프린트의 이 프로세스를 배워보면서 동시에 개발에서 정말 중요한 협업을 해보는 경험을 취지로 시작하게 된 스프린트가 벌써 6번째를 맞이 하게 되었습니다.

저희 6번째 스프린트는 또 어떻게 진행이 되었을지 한번 함께 해보시기 바랍니다.

저희는 게더타운과 피그잼이라는 도구를 적극 활용하였습니다.
이 글이 온라인에서 처음 만나는 사람들과 스터디나 사이드 프로젝트를 진행해야할때 도움이 되었으면 좋겠습니다.

첫째날: Team Building

안녕하세요! 테오입니다. 🤗

오늘 드디어 스프린트 6기가 출발하는 날입니다.
참 오래 걸렸네요. 특히 5기 때 신청 해주신 분들은 참 오래 기다리셨을 것 같아요.
기다린 보람이 있을 만큼 알차게 준비했으니 좋은 경험을 할 수 있기를 바랍니다.

서로의 남는 시간들을 함께 하는 것인 만큼 이 시간이 더 가치 있을 수 있게
우리가 오늘 만나기 전에 미리 준비해야 할 내용들을 전달드립니다

그라운드 룰

우리는 앞으로 호칭으로 부르고 서로 반말도 높임말도 하지 않습니다.
사적인 대화는 하더라도 나이와 본명은 절대로 묻지 않습니다!

우리는 앞으로 대화할때 상호존중의 의미로 반말은 절대 하지 않고 "~요" 로 끝나는 어미는 사용하지만
"~님", "~시", "~께서" 와 같은 높임말은 사용하지 않습니다.

ex) 테오님은 이거 어떻게 생각하세요? (X)
ex) 테오~ 이거 어떻게 생각해요? (O)

처음에는 어색하겠지만 금방 익숙해지실거에요!

피그잼에서는 적극적인 듣기를 해주세요.

온라안에서 캠 없이 만나는 것이기에 일부러라도 감정 고류를 높여야 합니다. 상대방이 말을 하고 있을떄는 과도한 리액션과 함께 글로 반응하고 스티커와 이모지 반응등을 시도해보시기 바랍니다.

Team Canvas

다 같이 모인 첫 만남이었습니다.
아주 오랜만에 하다보니 저도 조금 낯설었지만
Team Canvas 활동을 하면서 우리는 서로를 조금씩 알아가는 시간을 가졌습니다.
자기 소개를 하는 데에만 우리는 1시간 넘게 사용했지만 충분히 그 가치가 있다고 생각합니다.

TeamCanvas 활동을 통해서 나는 누군인지 그리고 각자는 어떤 개성을 가지고 있는지 확인 하는 시간이었습니다. 적극적으로 리액션을 해주고 반응을 해주면서 서로를 알아가는 시간을 가져보았습니다.

개린이

개발어린이 개발 어린이로서 많은 인사이트들을 채워나가고 싶어서
역할은 프론트엔드개발입니다.
잘 부탁드립니다. 좋은 추억 만들어봐요!
ㄴ 저도 개린입니다. 잘부탁드려요 ㅎㅎ

우빠

우O오빠 의 줄임말 친구들이 자주 불러서 사용하게됬어요.
역할 : FE 공부중
정말 하고싶었던 경험이었어요. 잘부탁드려요
ㄴ 우리오빠? ㅎㅎㅎ oppa!!!!!!

휴파

본명에서 앞글자만 따온 닉네임입니다! 주니어 프론트엔드 개발자입니다! 반갑습니다 잘 부탁드려요!!
잘 부탁드립니다!!!!
ㄴ ㅋㅋㅋ 반갑습니다~ 오오! 잘 부탁드려요!! 잘 부탁드려요

황기

제가 좋아하는 음식점인 계절향기 + 이름인 황혜빈을 합쳐서 계절황기로 롤 닉네임을 쓰는데 4글자는 너무 긴거 같아서 황기로 했습니다.
협업을 한 번도 해보지 않은 학생겸 취준생 프론트엔드 개발자 입니다~
ㄴ 이름이 넘 예빠요 반가워요~~~~ 롤 티어가 궁금 해요 ㅎㅎ 목소리 달달

비비

이름에 b가 들어가서 bb비비입니다
프론트엔드 개발
취준생입니다
ㄴ 간결 잘부탁드려요~ 홍일점이 되었군요!!! 리액션 너무 좋습니다. 면접 합격!! ㅋㅋㅋㅋㅋㅋ

까루

이름의 뜻 : 없음
배경 : 초등학교 때 부터 게임 닉네임 고민하다 사용
역할과 1줄 소개 : 프론트엔드 개발자를 꿈꾸고 있는 취준생 입니다!
잘 부탁드려요!!!1
ㄴ 아하!! ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 까루루루 까루! 반가워요!!! 까까까까

DARTZ

이름의 뜻 : 애지중지 하는 이어폰의 이름
배경 : 처음으로 알바해서 비싼 이어폰을 샀는데 너무 애정이 깊어서 닉네임으로도 사용했습니다.
역할과 1줄 소개 : 풀스택 개발자와 창업을 꿈꾸는 취준생입니다.
ㄴ 이름이 이쁩니다 다츠~~ 반가워요~~~~~~~~

스프린트에서 다같이 해냈으면 하는 목표

개인의 목표

각자의 강점

미리 알려줬으면 하는 약점

나를 위해 팀이 이렇게 맞춰주세요!

우리가 정한 스프린트의 가치와 그라운드 룰

즐거움: 최근에 면접에서 떨어지고 혼자서 개발을 진행하면서 개발에 흥미가 떨어지는중이라서 개발에 흥미가 더 가지는 시간이 되었으면 좋겠어요
성취감: 결과물이 최상이 아니더라도 끝났을 때 최선을 다했다고 생각이 들만큼 하고 싶어요
프로젝트가 끝났을 때 친밀감이 생기고 뿌듯함을 느끼면 성공~
ㄴ 저도 ㅠㅠ 힘내세요! 화이팅 화이팅!!

상호존중
커뮤니케이션
경험
ㄴ협업! 협업! 협업!

가치 : 모두의 성장
스프린트 전 자신을 되돌아봤을 때 단 한걸음이라도 성장했다면 성공했다고 생각해요
ㄴ🐥 우리 오ㅓ빠

모두가 행복한 개발
경험이 남는 스프린트
같이 고민하면서 나아가기
스프린트 전과 비교해서 성장했는지
GOOD 성장 성장이 젤로 중요하죠!!

좋은 인연
완성도 높은 결과물
스프린트 전보다 성장하기
조아요조아~~ 와아아아~~~~

성장
개발자 동료

그라운드 룰

# 오늘의 페어 내일의 직장동료가 될 수도 있습니다! 서로 존중해요

# 건설적인 피드백은 많이하자!
# 결과도 중요하지만 개발은 결과보단 과정이다.

# 다른 사람의 말을 무시하지 말자

# 자만하지 말자
# 친해야 질문도 더 잘할 수 있다. 친하게 지냈으면 좋겠어요

# 개발도 재미가 있어야 오래한다.
# 사람말고 코드를 욕하자.
# 모른다고 넘어가면 평생 모른다

# 칭찬은 고래를 춤추게하고 리액션은 우리른 춤추게한다 ?! 
# 포기는 배추셀때만 느려도 포기만 하지 말아요.

# 오늘 해결 못한 건 내일의 내가 더 잘할거에요. 말하지 않으면 몰라요. 

# 소통이 많으면 더 좋은 아이디어가 나와요!

아이디어 선정하기

이번에도 재미나고 좋은 아이디어들이 많이 나왔습니다.
우리는 다 같이 아이디어를 나누고 또 발표하고 4/4 소규모 토론을 통해서 하나의 의견으로 합의하는 과정을 가져봤습니다. :)

그리하여 결정된 이번 스프린트 주제는..... 두구두구....

"에니메이션 라이브러리" 만들기 라는 주제를 가지고 진행을 해보기로 하였습니다.

CSS 에니메이션 라이브러리

why?
 - 애니메이션 css구현하기 너무 귀찮고 복잡하지 않나요 ?! 

what?
 - 애니메이션 라이브러리

how?
- 클래스 이름을 작성하면 애니매이션을 사용할 수 있는 라이브러리

if?
- 모든 프로젝트에 라이브러리르 사용해서 쉽게 에니매에션을 구현할 수 있어요

궁극적인 목적 생각해보기

우리는 다같이 모여서 어떠한 것을 만들고 싶을지 궁극적인 목적을 생각해보는 시간을 가졌습니다.

목적
우리가 개발을 하면서 CSS애니메이션을 적용할 때 간편하게 가져다가 쓸 수 있는 CSS 애니메이션 라이브러리
한번씩 적용해봤던 애니메이션이더라도 시간이 지나면 잊어버리게 되는데 이러한 점을 방지할 수 있는 라이브러리

애니메이션을 배우지 않고도 사용할 수 있는 라이브러리. 

사용방법만 그대로 따라하면 사용할 수 있는 라이브러리
사용하기 쉬운 라이브러리
다양한 프로젝트에 적용하기 쉬운 라이브러리
개발을 하다보면 적용해 보고 싶은 애니메이션을 쉽게 적용을 할 수 있다. 

주로 많은 사이트에 채용 되는 애니메이션들을 사용 가능.
일반적으로 사용하는 애니메이션을 쉽게 사용.

+ 일반적이지 않지만 흥미로운 애니메이션을 쉽게 사용.

로직 개발에 집중가능.
어려운 애니메이션을 보다 손쉽게 구현할 수 있는 라이브러리

이렇게 첫째날 팀 소개와 아이디어 선정이 끝났습니다.

둘째날 : 지도그리기

우리는 본격적으로 우리가 만들어야 할 방향성을 정할 지도그리기 시간을 가졌습니다.

안녕하세요 테오입니다!!
스프린트 6기 둘째날이 끝났습니다~
둘째날에는 최종적으로 함께 만들어야 할 결과물에 대해서 스케치를 할 수 있도록 생각의 주파수를 맞추기 위해 논의와 합의를 해보는 MAP 시간을 가져보았습니다!

궁극적인 목적 생각해보기

다시 한번 우리가 만들어야 할 라이브러리의 목적을 한번 공유하는 시간을 가져보았습니다.

그리고 위에서 찾아낸 목적들을 다시 한데 모아서 꼭 필요한 키워드들을 한번 모아봤습니다.

목적을 질문으로 바꿔 생각하기 (어떻게 하면 ~ 할 수 있을까?)

우리가 찾아낸 키워드를 바탕으로 궁극적인 목적을 질문으로 바꿔서 생각을 확장해보는 시간을 가졌습니다.

어떻게하면 CSS에 대해서 잘모르는 사람도 쉽게 적용할 수 있을까?

어떻게 사용자들에게 “쉽다고” 느끼게 할 것인지?

어떤 방법으로 예제를 보여줄 것인지?
어떤 방식이 쉬운 것인가?

쉽게 사용한다의 기준이 무엇일까?
어떻게 하면 쉽게 사용할 수 있을까요??

어떻게 하면 효과적인 animation으로 사용자 경험을 증대시킬 수 있을까?

어떻게 하면 생산성이 증대 될 수 있을까? 클래스 네임? 직관적으로 알아볼 수 있는 네이밍?

정말 많은 에니메이션이 존재 하고 우리가 알고 있는 예제들은 누군가 코드로 구현한 것인데 우리가 이들을 직접 구현해야 하나?

테오의 회고:
이렇게 질문의 형태를 답할 때에는 답이 너무 추상적이면 또 다시 질문으로 바꿔 계속적으로 더 깊게 들어야야 했습니다. 시간이 부족해서 1depth에서만 끝났던게 지금 보면 아쉬웠던 것 같아요.

직관적인 이름 추상화 적재적소 선언형 카테고리 에 대해서도 할 얘기가 많았을 것 같아요.

어떻게 하면 직관적인 이름이 될까?
어떻게 하면 적재적소에 쓸 수 있게 만들 수 있을까?
어떻게 하면 에니메이션에 필요한 카테고리를 제공할 수 있을까? 등등..

레퍼런스를 통해 생각 공유하기

각자가 생각하는 만들고 싶은 라이브러리의 형태를 더 이해할 수 있도록 레퍼런스들을 보여주면서 생각의 방향성을 맞춰가는 시간을 가져보았습니다.

scroll-out
https://codepen.io/jh3y/pen/vzqVWa/

Framer Motion

Hover.css
http://ianlunn.github.io/Hover/

fetoolkit
https://www.fetoolkit.io/

React Scroll Parallax
https://animista.net/play/attention/jello

wow.js
https://wowjs.uk/

magicCSS
https://www.minimamente.com/project/magic/

npm css-animation

Animate.css
https://animate.style/

react-simple-animation

계속 생각을 확장하고 공유하기

MAP 활동에서 중요한 것은 결정하지 않고 최대한 많은 논의를 끌어내고 대립하지 않고 최대한 많은 의견을 받아 적어주고 즐겁게 생각이 확장되는 활동을 해야합니다.

아젠다를 한번 꺼내보고

각자 생각하고(논의X) 각자 아젠다에 대한 의견을 내면 모두가 듣고 받아 적어주고

핵심 키워드등을 추려보아 방향을 맞춰본 다음

그에 맞는 적절한 열린질문으로 바꿔보고 ex) 어떻게 하면 ~ ?, OO 란 무엇일까?, 어떤 기준이 우리에게 ... 등등

계속 이것을 확장시켜 나가봅니다.

이러한 발산과정을 몇번의 연습 이후 스스로 진행을 해볼 수 있도록 하기 위해서 스스로 진행을 해보는 시간을 가졌습니다.

최대한 결정이나 수렴없이 각자의 생각을 자유롭게 적어보고 공유하고 합치고 또 새로운 질문을 찾아가면서 구체화가 아니라 넓게 발산하는 형태를 기대했었지만 클래스 vs 컴포넌트, 라이브러리 vs code snippet 사이트, 에니메이션 라이브러리의 컨셉등에서 결정해야할 요소들이 먼저 튀어나오게 되면서 선택과 결정을 하는 논의가 되면서 아무런 진전이 없었습니다.

Tip:
지도그리기와 같이 초기 아이데이션에서는 결정이 무의미합니다. 결정에 들어가는 에너지는 어마어마하기 때문에 결정을 미루고 최대한 의견을 넒게 펼쳐두고 적어두는 식으로 갈 필요가 있습니다. 결정을 미리 해버린다면 그 이후의 방식들에 대한 고민은 아예 하지 않기 때문에 생각을 더 작게 만들 뿐입니다. 차라리 결정을 해야하는 기준이 뭐가 되면 좋을지를 고민해본다거나 둘 다 펼쳐놓고 다 펼쳐보는 것도 좋습니다.

A vs B 가 아니라 A + B = C 가 되는 방법은 언제나 존재합니다. 일단 대립없이 펼칠 수 있는 질문을 잘 만들어 보는 것이 중요합니다!

이후 다시 진행된 논의등에서는 결정이 아니라 일단 다 펼쳐보는 식으로 논의가 진행이 되어 조금 더 많은 생각이나 의견들을 모을 수가 있게 되었습니다.

수렴으로 가는 길도 펼쳐 보기

언젠가는 결정을 해야겠지만 일단 모든 경우를 다 열어두고 win-win하는 방법을 찾아보기 위해서 또 여러가지 사항들을 정리해서 생각을 공유해보았습니다.

모두가 합의한 내용
결정이 필요한 내용
나중에 결정해도 되는 내용
순서대로 배치해서 여정을 만들기!

모두의 얘기를 듣고 투표를 하고 다시 투표의 이유를 듣고 최종 합의를 하는 과정을 만들어 봤어요.

일단 결정하지 않고서 모든 것을 펼쳐놓고 상대방의 의견은 그저 적어주고 적극적으로 자기 이야기를 보여주고 투표를 통해 의사를 표시하되 다수결로 결정하지는 않도록 계속 확장을 하는 과정을 통해서 자연스레 모두의 방향성이 맞춰져 가고 있었습니다.

그래서 드디어 스케치를 위한 재료를 모두 모을 수 있었습니다!

스크롤 이벤트가 주력이라면?

카드 섹션으로 여러개를 나뉘어서 작은 프레임 안에 여러개의 스크롤 애니메이션을 구성
스크롤을 내리면 카드 섹션이 뒤집히면서 새로운 카드가 나오는 형식
공홈에는 오른쪽에 네비게이터 같은게 있고 누를때마다 해당 이벤트가 구현되어 있는 곳으로 이동하여 애니메이션을 볼 수 있게 한다.
간단하게 적용할 수 있는 튜토리얼 제공 

카테고리 별로 묶어서 예제 제공 + 코드도 같이 볼 수 잇는 링크
https://animejs.com/
공홈은 보기쉬워야한다. 스크롤이벤트가 없어야 좋을것같다.
좌측 네비게이션이 존재한다.
디테일을 들어가면 해당 애니메니션의 코드와 스크롤 박스가 존재하고 스크롤박스를 통해 애니메이션을 확인한다
기존 css에서 제공하는 보편적 스크롤이 아닌 스크롤 시에 애니메이션을 다양하게 제공이 가능함(전체 페이지 스크롤, 박스안 item 스크롤)
페이지업, 페이지 다운 이벤트도 같이 제공이 가능

첫 페이지에 각 애니메이션이 적용된 요소들을 보여주고 
요소 클릭시 코드와 예제 설명이 적힌 페이지로 이동

상단에 메뉴로도 이동가능

애니메이션이 많을 경우 스크롤이 너무 길지않게 느껴지도록 구현 ( 적당히 분기/카테고리를 나눔) + 맨 밑으로 갔을시 winodw.scrollTo(0, 0)

튜토리얼 제공!

페이지 전환이 주력이라면?

하단에 고정으로 animation이름으로 구분된 갈 수있는 nav바 생성
nav바 클릭 시, 해당 animation에 맞게 끔 페이지 전환 효과가 나오면서 비교적 심플하고 어떤 효과인지 확실히 전달ㅆ
네비게이션을 클릭하면 선택한 이벤트로 페이지 전환 애니매이션 적용
사이트를 책 (디자인)처럼 구현을 해서 한장한장 넘기면서 다양한 페이지 전환을 경험할 수 있는 UX를 제공해도 좋다고 생각했습니다.
첫 화면에 배경색을 바꾸어 화면 전환 애니메이션을 보여준다 

네비게이션을 통해서 구체설명으로 이동

박스안 이미지가 넘어가는 방식을 보여주는 형식으로 전환 예제를 보여주는 것이 한 페이지 내에서 많은 예제를 보여주는 것에 효과적이라고 생각
왼쪽엔 카데고리가 있고, 오른쪽엔 어떠한 섹션안에서 페이지가 전환되는 것을 보여준다.
(코드펜처럼)
좌측 네비게이션이 존재
버튼 클릭시 페이지가 전환되며 전환 애니메이션을 적용
전환된 페이지에는 코드와 박스가 존재하고 박스를 새로고침하여 애니메이션을 재확인 가능

지도 완성!

그래서 우리가 만들기로 한 지도가 완성이 되었습니다. 지도 완성의 의미는 단순히 위 그림과 같은 결과물이 아니라 그 동안 논의를 하면서 만들어진 모두의 방향성에 대한 주파수가 하나로 정해지고 컨텍스트가 공유 된 것이 가장 중요합니다.

셋째날: 스케치

안녕하세요 테오입니다.
오늘부터는 우리 Nice People Meeting 여러분들끼리 즐거운 페어프로그래밍을 하고 있을 거라고 생각합니다.

스프린트와 페어프로그래밍을 함께하면서 의견이 충돌할때는

1) 일단 다 들어주고 모든 것을 펼쳐두고 A vs B가 아니라 A + B = C를 찾아봅시다
2) 그리고 결정 하는데 너무 시간을 쓰지 말고 언제나 일단 만들고 눈으로 보고나서 판단하는게 더 낫다는 사실 잊지 말고
3) 일단 결과물이 나와서 결과물이 결정을 만들어내는 방법을 꼭 배워가고 경험하기를 바랍니다.

이것만 배워가셔도 스프린트의 모든 것을 배워가는 것이기에
제가 강조하는 이 마인드 셋 잊지 않기를 바래요 🤗

다시 또 레퍼런스...!

우리의 방향성에 맞춰 스크롤이나 페이지전환등 특수한 상황에서 특수한 상황에서 자주 쓰이는 스크롤과 화면전환시 에니메이션을 해보자는 방향성으로 다시 한번 레퍼런스들를 모아봤습니다.

AOS ( 스크롤 애니메이션 라이브러리 )

[장점]

가벼움
사용하기 매우 쉽고 간편함
React 라이브러리 환경에서도 쉽게 사용가능
공홈 구조가 간결하고 보기 쉬움.
스크롤을 내릴 때 해당 애니메이션을 간단한 코드 박스로 보여줌.
아주 간단한 코드를 보여줌(추상화)
직관적인 네이밍을 사용함.

[단점]
커스터마이징 제한적
transform: none; 속성이 강제되기 때문에 다른 transform을 사용하는데 제약이 있음
AOS - Animate on scroll library

BARBA(페이지 전환 애니메이션)
[장점]
가벼움
공홈이 예쁨

[단점]
코드 설명이 부족함

효과에 대한 예제가 부족함
예제 코드가 여기저기 흩어져있음
미숙련자에게 어려운 문서

AOS - Animate On Scroll library using CSS3

React Scroll
스크롤 관련 예시들을 StoryBook을 이용해서 제공
test와 storybook에 대한 사용 예시와 hook으로 만들어 내는 예제에 대해서 확인이 가능함

AOS
스크롤을 페이지를 내리면서 확인이 가

[페이지 에니메이션]
다양한 애니메이션 확인이 가능함 대체로 저작권이 상업용 사용이 아니라면 괜찮은 것으로 알고 있음
michalsnik.github.io
barba.js
react-scroll-parallax.damnthat.tv
barba.js.org

AOS - Animate on scroll library
michalsnik.github.io

Repaintless.css
(http://szynszyliszys.github.io/repaintless/)
공식홈페이지 구성을 위와같이 하고싶어서 참고하였습니다.

wowjs.uk
(https://wowjs.uk/)
한번 이벤트가 끝나면 다시 보지못합니다.

AOS
(https://michalsnik.github.io/aos/) 스크롤 형식인데 스크롤을 내리다 보면 이전에 무엇을 인상깊게 봤는지 까먹게 되는 구조로 되어 있습니다.

화면전환 애니메이션
Animatopy
(https://sarthology.github.io/Animatopy/)
selector 형식으로 선택하여 볼 수 있는 공식홈페이지

VOV.css
(https://vaibhav111tandon.github.io/vov.css/)
selector 형식으로 선택하여 볼 수 있는 공식홈페이지

ScrollOut
특징: 스크롤 애니메이션 라이브러리로 클래스로도 적용할 수 있고 자바스크립트 코드로도 적용할 수 있다.
단점으로는 예제를 보기가 불편했다.

공홈 레퍼런스 react-spring
특징:Hooks나 Component로 제공 + className으로 적용할 수 있는 것 제공

코드예제 react-spring
react-spring 라이브러리를 사용해서 div의 fadein과 fadeout을 반복하는 hook예제

ScrollOut
Effects and CSS Vars on Scroll!
scroll-out.github.io
스크롤을 내리는 것보다 체크박스또는 셀렉트를 통해 애니메이션을 보여주면 어떨까
스크롤 애니메이션 라이브러리

animate.css scroll
https://dbramwell.github.io/react-animate-on-scroll/#home
어제 봤던 animate.css에서 scroll까지도 되어 있었음
코드 블럭과 함께 어떤효과인지 소개를 하면서 마지막엔 install 방법과 github 소개
제가 생각한 구성과 비슷
js-animate-scroll
https://bupy7.github.io/js-animate-scroll/#9
버튼을 누르면 어떤 느낌으로 스크롤이 움직이는지 스크롤 애니메이션이라고 해서 이런데에 포커스를 맞춰도 되겠구나라는 생각을 들게 해 좋았다. 생각전환

화면전환 애니메이션

react-transition-group
https://reactcommunity.org/react-transition-group/
예제부터 코드샌드박스 테스팅까지 자세한 설명과 구성이 되게 좋았다.

페이지 처리 효과 모음
-> 다양한 페이지 처리 애니메이션을 볼 수 있어서 어떤 애니메이션으로 선택할지 도움이 된다.

https://uicookies.com/css-page-transition/

마음에 들었던 것
1) Skewed One Page Scroll
2) Hexagon Circle
3) Old School Television
4) FullScreen Layout Page Transition

스크롤 처리 효과 모음
-> 다양한 스크롤 처리 애니메이션을 볼 수 있어서 어떤 애니메이션으로 선택할지 도움이 된다.
https://codemyui.com/tag/scroll-animation/

마음에 들었던 것
1) Direction Aware Fill Text Effect
2) https://codemyui.com/scroll-through-image-to-change-text-parallax-effect/
3) gsap 메인 페이지 스크롤

화려한 애니메이션을 만드는데 도움을 줄 수 있는 라이브러리
https://greensock.com/
gsap?
GSAP는 GreenSock에서 만든 자바스크립트 애니메이션 라이브러리이다.

세밀하고 화려한 애니메이션을 만드는데 도움이 될 것으로 생각이 된다.

다만 라이브러리의 용량이 커질까봐 걱정이 됨.

react-spring
Bring your components to life with simple spring animation primitives...
react-spring.io
react-transition-group

화면전환 효과 이외에도 컴포넌트에도 활용가능 => 그룹으로 묶는 방식 wow.js className을 사용하지만 data-set으로 커스텀 가능
React Transition Group
reactcommunity.org

wow.js — Documentation
wow.js is a JavaScript plugin that reveals animations when you scroll....
wowjs.uk

겹치는 레퍼런스들이 많아서 방향을 합쳐 보면서 또 차별화 포인트도 세워 볼 수 있던 시간이었습니다.

코드 스케치

라이브러리인 만큼 개발자가 마지막 고객인 만큼 DX를 중요하게 쉬우면서 모든 기능을 제공하고 또 잘 만든 문서화가 되어 있는 라이브러리를 만들기 위해서 구현전에 어떤 형태로 제공을 할지 고민을 하는 시간을 가졌습니다.

아직은 이러한 것들이 낯설기에 여러가지 논의가 길게 이어졌고 필요한 형태를 합의하는 과정이 오래 걸렸습니다.

크게 class와 Component로 분리가 되어 2개조로 나뉘어 생각을 하나로 합쳐보는 시간을 가졌습니다.

결정

첫째날, 둘째날에서 우리가 엄청나게 많은 논의와 방향성을 논의했지만 2일간의 개발양으로 이 모든 것을 구현할 수는 없습니다. 그럼에도 스프린트에서 이렇게 많은 논의를 해보는 것은 여러가지 방향성을 미리 생각을 하고 이 과정에서 팀원간의 컨텍스트를 맞추고 구조를 머리속에 넣어 두기 위함입니다.

언젠가는 다 만들어야 하겠지만 일단 테스트가 가능한 최소한의 완성 마지노선을 결정하여 일단 만들고 고쳐나며 발전시킨다는 애자일한 방법을 위해서 첫번째 데모의 범위를 생각해보았습니다.

스크롤 에니메이션 기능으로 만든다.

fade in-out과 좌우, 혹은 상하로 움직이는 에니메이션 최소 1개 포함

그리고 예제가 담긴 공식 홈페이지

그래서 최종 결정한 우리의 완성 마지노선은 다음과 같습니다.

4
PL정하기 그리고 시작

PL은 개린이가 되었습니다.
PL은 결정하는 역할을 수행합니다. 앞으로도
개린이는 이제 남은 주말과 월요일 테스트 및 회고 전까지 프로젝트 진행을 잘 이끌어 주기를 바랍니다.

완성이 중요하나 무엇보다 협업을 경험하는 것이 더 중요하기 언제나 즐겁고 웃으면서 몰입하고 성장하고 함께 한다는 그 기분을 느끼는 시간이 되기를 바랍니다.

그동안 설계과 합의를 하는 과정을 한다고 고생많았습니다.

앞으로 남은 주말 이틀동안 즐거운 시간을 보냈으면 좋겠습니다.

주말: 개발...

개발하는 시간은 온전히 스프린트 참가자들만의 시간입니다.

마지막날: 테스트 및 회고

결과물 공유

주말동안 열심히 함께 개발 해준 결과물이 만들어졌습니다.

scroll animation js
"주니어 개발자가 스크롤 이벤트가 힘들어서 만든 스크롤 에니메이션 라이브러리"

이렇게 NPM에 라이브러리리 등록도 하고
https://www.npmjs.com/package/scroll-animations-js

공식 홈페이지도 만들게 되었습니다.
https://scroll-animations-js-web.vercel.app/

릴리즈 및 테스트

이렇게 외부에 공개를 하고 실제로 어떤지 한번 피드백을 받는 시간도 가져보았습니다.

회고시간

좋은 스프린트는 결과물이 아니라 짧은 주기의 개발과 함께 항상 회고를 통해서 좋았던 점과 개선할 점을 찾아 다음 스프린트에 반영해서 계속 개선해나가는 것입니다.

이렇게 진행해본 회고를 통해서 두번째, 세번째 스프린트에서는 지금 느꼈던 것들을 보강하면서 발전할 수 있었으면 좋겠습니다.

회고는 크게

프로젝트
팀
스프린트와 개인

이렇게 3가지 주제를 통해서 진행하고 회고 방식은 4LS를 사용하였습니다.

프로젝트 회고 - scroll-animations-js

Liked

모바일 사용자를 고려하여 반응형! (처음엔 신경쓰지 말자고 했으나 다시 결정)
탭 버튼으로 간편하게 조작 가능
보기쉬은 문서!
간편한 사용!
바닐라js부터 vue까지 지원
애니메이션에 대해서 잘몰라도 문서와 예제를 보고 쉽게 적용할 수 있다.
여러 플랫폼에서 사용할 수 있다.
가장 많이 사용되는 스크롤 효과들을 쉽게 사용할 수 있도록 만든 것
상세한 문서화.
많이 사용
상세 문서화
공식홈페이지가 사용자 친화적이다! (모바일까지 지원!!!)
공식문서가 깔끔하다!
쉬운 사용
다양한 환경에서의 사용 가능
깔끔한 공식 문서와 예제
문서화를 잘 해놓았고 다양한 사용환경을 지원한다는 점이 잘했습니다.

Learned

만만하게 볼 건 없다.
npm 배포에 관련하여....

Intersection Observer API을 적용하는 법

NPM배포

어떻게 협업을 해야 효율적으로 하는지

CSS는 역시 어렵다.

공홈을 만드는 과정에서 지속적으로 라이브러리 사용법에 대해 소통이 필요했다.

반응형의 중요성을 알게되었다.
소통의 중요성!!
나도 이제 npm 배포자!!
ㅋㅋ
ㅋㅋㅋㅋㅋ
인터섹션옵져버에 다양한 옵션들
css 선택자와 sass
package.json 파일에 프로젝트에 관해 많은 정보가 숨겨져 있다는걸 알게 되었습니다.

다양한 사용환경을 고려한다는게 이렇게 많은 생각을 해야하는구나라는 것을 느꼈습니다.
마자요
css 는 말만 쉬움 ㅠㅠ
의사결정과 협업하는 과정에서 “어떻게 하면 원할하게 할 것인가?” 에 대한 것들!
애니메이션은 쉬운 게 아니구나!

IntersectionObserver 사용법
NPM 배포와 다양한 환경에서의 모듈 제공법
Sass for문을 이용한 쉽게 css 만들기

Lacked

UI 적으로 카테고리 nav바와 프리뷰를 한 화면에 담지 못한것이 아쉬웠다.

맞아요ㅠㅠ
여러 예제 애니메이션이 더 있으면 좋을 것 같다.

사이드에 메뉴가 있는게 사용하기에 조금이지만 더 편리할 수도 있을 것 같다.
처음부터 라이브러리구조와 공홈 구조를 확실히 설계하고 구현했으면 더 좋았을 것 같다.

저도 너무 아쉬워요....
스크롤을 올렸을때 애니메이션이 다시 원래대로 돌아갔으면 좋았을 것 같다.

공식홈페이지 디자인과 구조를 조금 더 깔끔(유저친화적이게)하게 짤 수는 없었을까??

애니메이션이 어쩔때 작동하지 않는지에 대해 완벽히 이해하지 못했다!
스크롤 이벤트가 한번만 실행되는것-> 끝까지 고치지못해서 너무 아쉬움 ...⭐️
코드 구조가 아쉽다
CSS를 더 잘알았다면 쉽게 했을텐데 부족해서 좀 더 시간이 소요된 것 같다

1000번공감
npm 배포에 대해서 미리 알고 진행을 했으면 초반 배포 오류에 시간을 많이 소요하지 않았을 것 같다라는 아쉬움이 있습니다.
npm 마스터
왜안되지..의연속

Longed For

디테일한 옵션과 다양한 애니메이션 추가

깔끔한 UI 작업
다양한 애니메이션
공홈 UI
리팩토링
애니메이션 재실행기능
여러 애니메이션 추가

스크롤 이벤트 트리거의 횟수를 옵션으로 받을 수 있도록

공홈의 편의성을 좀 더 고민하기
현재 자바스크립트로 dom을 사용해서 코드가 구현되어 있는데 vue에 맞게 컴포넌트로 구현해서 vue 전용 버전을 배포해보고 싶습니다.

공홈에서의 자세한 튜토리얼
더 많은 애니메이션 지원하기

모든 환경 지원하기

공식문서 조금 더 자세하게 적기

공홈에 옵션 예제 하드코딩 제거하기
스크롤 이벤트 여러번 실행 가능하게 하기
코드 구조 깔끔하게 리팩터링
좀 더 다양한 애니메이션을 지원
현재 문제가 있었던 IntersectionObserver의 재실행 가능을 지원하여 배포하는 것

NPM 멤버들

Liked

열쩡열쩡열쩡!!!!!!!!!
열정적이고 힘들어도 열심히 참여하는 모습이 좋았습니다!!
강행군 일정에도 오히려 욕심 내준 팀원에게 감사합니다.

주말동안 누구하나 꾀부리지 않고 자기가 맡은일에 책임을 다한 것 같아 너무 좋았습니다.
개인의 열정이 강해서 무엇이든 믿고 맡길 수 있었어요.

구현 과정에서 서로 배려하는 모습도 좋았습니다.
전부 시간을 잘 맞춰서 진행했고 실력적으로 부족함이 없었습니다.
소통과 협업이 너무 잘 되어서 좋았어요!!
소통/협업 뿐만 아니라 기술적인 부분도 정말 많이 배워갑니다!!
어려워 보여도 끝까지 포기하지 않고 프로젝트를 마무리 한 것이 좋았습니다!!!

적극성과 열정
책임감!!!!!!!!1
크~~

Learned

같은 프론트 개발자여도 자기가 생각하는 주요 관점이 다를 수 있다는 것

서비스 중심 vs 기술 중심
어떻게하면 소통을 잘 할지  공유의 중요성
팀원과 소통하는 방법

소통과정에서 생각의 확장이 될 수 있다는것

각자의 생각으 열린마음으로 듣는 방법.
<- 이거 너무 중요하죠!!
맞아요..!!
불가능 해보이던 프로젝트라도 각자 역할을 맡고 역할에 맞게 최선을 다하면 해결할 수 있다는 것을 배웠습니다.

하나의 문제를 바라보는 시각과 관점이 많이 다르다는 것을 느꼈습니다.
7:3 6:4
처음 협업을 하는데 협업을 하는 방법이랑 어떻게 효율적으로 하는지 배웠어요
아무리 짧은 시간이어도 목표와 방향성이 명확하다면 효율적으로 목표를 달성할 수 있다는 것! 팀 단위에서의 선택과 집중이 얼마나 중요한지 알게되었다.
같은 프론트앤드 개발자를 꿈꾸면서 동일한 문제에 대한 다양한 생각을 알아볼 수 있었습니다.
소통의 중요성!

Lacked

충분한 시간을 가지고 서로 팀원을 교체해보면서 작업을 할 수 있었으면 더 많은 것을 깨달았을 것 같습니다.
긱지 맡은 부분에 대해서 설명이나 정리가 되서 공유했으면 좋았을 것 같다
앞으로는 나눠서 !
의견을 교류하는 것과 결정을 하는 것을 분리하면 시간을 더 절약할 수 있을 것 같아요!
시간적으로 부족했져 ㅠㅠ
마자ㅛ 아쉬워요유 _ㅠ
공감합니댜 ㅠㅠ
전체적인 흐름을 알고 같이 진행한 것이 아닌 각자 맡은 부분에서만 완성에 목적을 두고 진행하여 문제점들에 대해서 다양한 의견을 들어보지 못한게 아쉽습니다
뷰 배워보겠습니다 ㅎ
비대면의 슬픔 ㅠㅠ
대면 상황이 아니라서 100% 모든것을 공유하지 못한것이 아쉬웠어요.

결정을 위해 회의를하면 생각보다 많은 시간이들어 회의를 자주 할 수 없는 상황
제가 React를 잘 몰라 마지막에 같이 하지 못했던 것이 아쉬웠습니다..

3개의 팀으로 나누어져서 각자의 분야만 했었던 부분이 조금 아쉽다!
NPM 배포 굿!!
이미 너무 많은걸 맡아서 하셨어요!!
아니에용!!
하지만 npm배포를 담당해주셧자나여!! 감사합니다!!!!!

Longed For

앞으로도 인연 이어가기~
좋은 곳으로 취업하시고 꼭 말씀해주세요 같이 축하해드릴게요
‘사이드 프로젝트 같이하실분?’

제가 만들고 싶은게 많은데 몸이 한개입니다. 혹시 하나는 대박날지도?
불러주세요~~~ -비비
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
좋은 인연 이어나가기!

다음엔 역할 바꿔서 해보기!

취준 스터디 같이 해보기

앞으로 쭉 인연 이어가기
조아요~~~
좋은 일 있을 때 자랑하고 진심으로 축하해주기

직접 만나서 커피한잔 하고싶어요~

스프린트 체험 & 개인

Liked

이런 오프라인 프로젝트 경험이 없었는데 좋은 팀원들과 경험이 너무 좋습니다.

저의 스프린트 목표는 좋은 팀원들과의 프로젝트 경험, 시니어 개발자인 테오의 생각과 경험을 얻어가는 것이 주요 목표 였는데 매우 잘 이루어져서 Like!!!!!!!!! * 1000000000
스프린트로 협업의 모범 답안을 경험한 것 같아서 너무 좋았습니다.

열정적인 여러 개발자들과 교류하는 경험은 너무 귀한 경험인 것 같습니다!
스프린트가 무엇인지 이번기회에 제대로 체험해서 좋았어요.

달리는 방법을 배워서 좋았어요.

모두가 하나의 목표로 움직였던 것이 좋았어요.
개발자는 한평생 협업을 해나아가서 협업스킬을 꼭 배워야 하는데 이렇게 좋은 기회에 많은 것을 배워 너무 좋았습니다! (어디가서 절대 배울 수 없는 테오의 노하우 포함!!)
좋은 분들과 좋은 시간 보내서 너무 즐거웠습니다
모듈 배포를 처음으로 해봐서 정말 재밌었어요

같은 프론트앤드 개발자를 꿈꾸는 사람들과 프로젝트를 해볼 수 있어 너무 좋았습니다.
짧은 시간안이지만 기획에서 개발까지 결과물을 낼 수 있엇던점
배운것이 너무 많았습니다
저에 대해 많이 돌아보는 시간이 되었던 것 같습니다. 지금동안 혼자 개발 공부를 하면서 큰 어려움이 없어서 제가 잘한다고 생각했는데 어려움이 없었던게 아니라 많은 것을 고려하지 않았던 것 같습니다.

그리고 다른 사람들의 이야기,꿈과 목표를 들어보면서 제가 나아갈 길이 좀 더 명확해진 것을 느꼈습니다.
진솔한 이야기 ㅠㅠㅠ
다츠 멋져요
다츠대표님
저 청소 잘해요..!
저의 CTO가 되어주실래요? -다츠-

Learned

결정은 많은 에너지가 들어간다.
ㅋㅋㅋ 그렇죠!
공감입니다

팀원들간의 의견을 잘 정리하고 중재하는 것도 능력

옳고 그름을 따지는 것보다 한 발자국 전진이 더 중요하다.

짧은 주기로 프로젝트를 진행할 수 있다는 것.

개발하는 것을 배우는 것도 중요하지만 의사소통하는 법에 대해서 배우는 것도 개발하는 것만큼 중요하다.

협업을 효율적으로 하는 것은 상당한 시간절약이 가능하다.
어느 수준에 오르면 일잘한다 = 개발을 잘한다가 아니에요!
수렴과 발산에 대해서 이전에 배웠었는데 또 그새 까먹어서 이것을 인식하고 적용해야만 한다는 것을 배웠습니다!
그리고 제가 한 행동이 다른분들에게 어떻게 비추어질지, 말들이 어떻게 다가갈지에 대해 다시 한번 생각해보고 얘기를 하는 것이 좋을 것 같다는 것도 배우게 되었습니다!
방향성!
황기가 말한 내용처럼 결정과 의견 교류에 대한 차이점을 다시 알게 되었어요
짧은 주기로 스프린트를 하니깐 정말 집중하게 되어서 완벽하진 않지만 그래도 어느정도 결과물이 나올 수 있다는 것을 느꼈습니다.
의견을 결정하는 방식  컨텍스트의 중요성

Lacked

정말 짧은 PL 경험이였지만 부족함을 느끼게 되는 이틀이였던 것 같습니다.

의견이 막 분산될 때 PL 이라는 명목하에 결론 지으려고 하고, 의견을 어떻게든 모으려고 애를 썼던게 스스로 조급해지지 않았나 싶습니다.

경험이 있었었다면 더 좋았을 것 같습니다.
완벽했어요!
미안해요 ㅠㅠ
저도 그래서 공감 합니다
PL 그자체
밤낮이 바뀌는것이 조금 힘들었다

게더타운이 디스코드에 비해 화면 공유 퀄리티가 떨어지는 느낌을 받았어요.
의견을 나눠야 될 때 습관적으로 결정하려고 했던 것이 아쉬웠습니다.

존재만으로도 힘이 되었다구요~~!!!!!!!!!!
React를 모르더라도 모듈 만드는데 도움을 많이 드렸을 수도 있을 것 같았는데 피해가 될까봐 그러지 못했는데 너무 제가 소심하게 생각했었다라는 생각이 들기도 합니다.
그거시 PL!
중우정치..
좋은 PL의 대명사
PL 강의 기다릴게요
ㅋㅋㅋㅋ
스프린트 진행 방식에 못따라간것 같아서 아쉬워요 (개인)
의견을 낼때와 결정할때를 제대로 구분하지 못해서 아쉽습니다
의사결정에 있어서 우리가 공통적으로 정했던 목표가 좀 더 명확햇다면 .. ?

시간이 부족하다 보니 결정에 있어서 제 의견을 좀 강하게 표현한 부분이 있었던거 같아 좀 더 시간을 길게 가지고 소통을 통해 이 부분을 고쳐 나가도 좋을 것 같습니다

시간에 쫓겨서 빠른 결정을 해야만 해서 좀 더 좋은 방법을 찾을 시간이 부족한게 아쉽습니다 ㅠ
오히려조아~~
플라시보?
공홈을 맡았지만 맡았던 부분에서 일어난 오류를 해결하지 못했던 점이 많이 아쉽습니다!

어떤 것을 표현하는 언어능력이 조금 떨어진다(?)는 것을 느꼈습니다!
적극적이라서 좋았습니다!
조곤조곤 목소리조하요
하나도 모르겠습니다
그렇게 경험자가 되어간다...

Longed For

스프린트를 하면서 얻었던 것들을 다시한번 정리해서 머리속에 각인시켜 적용할 수 있는 상태가 되기!

모든 사람들이 찾고, 협업 하고 싶어하는 동료 되기!
긍정적으로 살기!!
앞으로도 짧은 주기로 팀프로젝트를하면서 익숙해지고 싶어요.

빠른 회의 스킬 늘리기!

+이미 했던 프로젝트를 스프린트 돌리기
사장님!!!!
앞으로 어떤 스프린트가 있을 지 모르겠지만 언젠가 더 좋은 리더, 좋은 동료가 되고 싶습니다. + 필요로 하는
사업이 되는 (돈이 되는) 서비스를 같이 개발해보고 싶습니다. 사람마다 각자의 재능이 있어 같이 하면 정말 뭔가 나올 것 같습니다.

유니콘 기업 ‘Nice People Meeting’
좋습니다~
당신은 이미 ...
믓찌다믓쪄~
need u
다른 프로젝트에서 배운 협업 방식을 적용해보고 싶습니다.
스프린트 진행방식을 다른 프로젝트에도 적용해보고싶습니다
5일 보다는 긴 시간을 가지고 여유있게 작업을 했으면 좋을 것 같아요

아이데이션 스프린트 => 구글 벤쳐스 스프린트
실무에서 애자일하게 하는 스프린트
2주차 가나요 ?????
스프린트 전도사
에너지를 쪽쪽 빨아 먹는 방식이라서. ㅋㅋ
3주차가 되면 회의감에 빠집니다. ㅋㅋ
또 쉬면서 하는 것도 연습이라서~~