프로젝트 리더로 도전하기, 와글와글 개발기

👨‍👨‍👧‍👧 Week01. 서로를 알아가기

생각이 많은 사람들

아이디어가 넘쳤습니다.

역할과 규칙을 만듭시다.

개발환경과 코딩 컨벤션을 만듭시다.

🤼 Week02. 협업에 익숙해지기

파트 분리

트러블 슈팅을 정리합시다.

와글와글 트러블 슈팅

구현보다 의사결정이 중요합니다 : 마무리 스크럼

차량은 생산성을 높여줍니다 : 유머와 여유의 탄생

https://user-images.githubusercontent.com/69471032/202074041-da91a700-e87a-4ce9-a380-41eb96044131.png

기술적인 도전이란 무엇일까?

💁 Week03. 컨디션 관리, 유머와 여유 챙기기

컨디션 관리의 중요성

Wiki 작성

절반에서 돌아보기 : 포스트 모템

📒 Week04. 문서 레이아웃 개선

문서 레이아웃 수정

Github을 더 적극적으로 활용합시다.

문서로 대화하기

의사결정에 대해 다시 알리기

🏃‍♀️ Week05. 열심히 달리기

커뮤니케이션 적응

컨디션과 멘탈관리, 이력서를 같이 씁시다.

🏁 Week06. 유종의 미 거두기

리더로써


긴장과 조급함

어떤 압박감이 좋은 것일까?

프로젝트를 진행하며, 압박감으로 판단이 흐려졌던 경험이 있다. 언어 선택이나 기술선택 모두 마찬가지였다. 처리해야할 문제에 급급해져서 제대로된 상황 판단이 어려웠다.

휴식해서 압박감을 풀어낸 뒤, 문제를 해결하고 회고하다가 압박 상황에서 휴식을 해야만 좋은 판단을 내릴 수 있다면, 내가 원하는 강인함과는 거리가 있다는 생각이 들었다. 하지만 분명히, 압박감은 판단력을 흐리게 만들었다. 어떤 압박감이 필요하고, 어떤 압박감이 판단력을 흐리게 만들까?

압박감, 나만의 기준 찾기

흔히들 좋은 압박감과 나쁜 압박감이 있다고 하지만, 떠오른 의문에 충분한 답변이 되지 못했다. 나는 좋은 압박감과 나쁜 압박감을 구분하는 나만의 기준이 필요하다는 생각이 들었다.

긴장과 조급함

생각 어디쯤에서 묻혀있던 고민에 대해 갑자기 떠오른 단어는 긴장과 조급함이었다.

압박감이라는 단어는 긴장과 조급함 이외에도 많은 갈래로 갈라질 수 있겠지만, 이번 프로젝트를 하면서 나를 더욱 더 가슴뛰게 만든 압박감은 긴장에 가까웠고 나를 지치게했던 압박감은 조급함에 가까웠다.

조금 더 깊게 들어가보자면, 잘 설정된 목표가 주는 긴장감과 그것을 성취하기 직전의 과정이 주는 아슬아슬한 긴장감이 내가 가슴뛰게했고

우선순위가 명확하지 않거나 리스크 테이킹에 대한 근거가 너무 부족한데 많은 에너지를 사용해야하는 등 제대로 설정되지 못한 목표가 만드는 배드스멜, 그 배드스멜이 시간이 지나고 썩어가면 가지게 되는 조급함이 판단력을 흐리게 만들었다.

강해지기

긴장감을 다루기 < 제대로 싸우기, 싸울 것이 맞는지 확인하기

긴장감을 가졌다면, 꺾이지 않는 마음을 가져야한다는 사실을 다시 새긴다. 제대로 설정된 목표라면, 뛰지 않는다면 명확한 게으름이다. 뛴다면 분명한 가치와 만족감을 준다. 제대로 설정된 목표임에도 불구하고 제대로 뛰어지지 못하고 있다면, 목표에 대해 다시 의심해봐야한다는 생각이 들었다. 긴장될만큼 충분히 난이도 있는 목표가 아니거나, 내 역량에 맞지 않는 목표를 설정했다거나, 우선순위가 제대로 그려지지 않았다거나, 내게 명확한 비전을 그려주지 못하고 있다거나. 그런 배드스멜을 느끼는 것

긴장감을 느낄 때 물러나지 않고 싸우는 것이 중요하다고 생각한다. 좋은 목표라면, 쉬는 것보다 뛰는 것이 낫다. 너무 많은 일을 하는 것으로 힘들다면, 아마도 그건 조급함을 다루기로 넘어가게 될 것 같다.

결국 긴장감을 다루는 것은 긴장감 이전의 인지를 다루는 것이 중요하다고 정리되었다. 내가 뛰게 만들고 있는 목표는 나를 충분히 긴장하게 만들고 있는가? 가슴뛰게 만들고 있는가? 내가 느끼는 것은 긴장감이 맞는가 조급함이 맞는가? 이것이 첫번째 인 것 같다.

조급함을 다루기 < 제대로 초점 맞추기

목표 설정이 되지 않는 경우 조급함이 생기는 것 같다. 목표는 단순히 회사나 팀이 준 것뿐만 아니라, 주어진 목표에서 내가 얻고자 하는 것이라고 생각한다. 모든 목표의 이면에는 내가 얻고자 하는 것이 있었다.

적어도 나에게 수학 문제 한 문제를 푸는 것은 동그라미나 가위표를 얻기 위함이 아니고, 코드를 한 줄 치는 것은 예쁘게 만들어진 글자 덩어리를 보기 위함이 아니었다. 누군가가 가진 문제를 해결해내거나, 누군가가 주어준 문제를 해결해내는 것도 잘 뜯어보면 나의 이면에 있는 무언가를 위해서였다.

지금 내가 하고 있는, 설정한 목표는 제대로 초점을 맞추고 있는가? 내가 팀이나 회사의 일을 도와 해결하고 싶은 조직의 문제는 무엇인가? 문제를 해결해서 내가 얻고자 하는 것은 무엇인가? 현재 하고 있는 행동은 정말로 내가 얻고자 하는 것을 효율적으로 해결하고 있는가?

판단력이 흐려졌을 때, 초점을 다루기

판단력이 흐려져서 이것이 눈에 안들어오면 방법은 두 가지 였다. 하나는 초점에 대한 판단을 남에게 의존하는 방식이고, 하나는 내가 다시 초점을 조정하는 것이었다.

내가 리더가 아니라면, 조직에서 요구하는 목표에 집중하는 것이 나을 수 있었다. 리더가 아니라면 결국 책임을 지는 이가 내가 아니다. 판단의 주체가 내가 아닐 수도 있었다. 이런 때는 내가 배드스멜을 느끼고 조급함을 느낀다면, 내 초점을 고치는 것이 아니라 커뮤니케이션을 통해 내가 목표를 제대로 이해하고 있는지 확인 받는 것이 낫다고 생각되었다.

주체적인 삶을 포함해서, 내가 리더라면 그때는 어떻게라든 회고하는 시간을 내야한다고 생각한다. 하면 뭐든 된다. 하지만 뭐가 될지는 경험상 내가 명확히 알고 있지 않으면, 자연스럽게 내가 모르는 곳으로 향하고 있었다. 그럴때는 조급함과 배드스멜이 난다. 그런 시간 동안에 '그래 나는 도전하고 있어'라고 스스로를 위로한다면 그 배드스멜이 썩어갔다.

결국은 내가 하고 있는 것을 명확히 알기위해 회고하는 것, 도식을 만들거나 흐름을 파악하는 것이 압박감을 다루기 위한 두번째 요소가 아닐까 하며 오늘의 글을 마친다.


와글와글 Parallax 스크롤 도입기

scroll-animation (1)

❓ 스크롤 애니메이션 도입기

🛤️ 과정 : Intersection Observer, SVG, Parallax

Intersection Observer API

SVG path 따라 그리기 (SVG dashoffset과 dasharray)

시차 스크롤 (Parallax Scroll)

❗결과 : UX적으로 몰입감 있는 서비스 소개


2차원 데이터 시각화를 해봅시다.

문제의 발생과 접근

데이터 시각화, 기술적인 도전이란 무엇일까?

문제 접근, 탐구와 이해를 선호합니다.

2차원 배치 알고리즘

image (팀원분의 달팽이 순회로 2차원 사각형 적재 알고리즘 설계)

우리 버블 차트로 바꿉시다.

image (버블차트 예시)

물리엔진의 도입

레퍼런스 라이브러리 찾아보기

image (circlepacker 라이브러리 - 내부적으로 물리엔진이 있다.)

연산만 하게 만듭시다.

그럼 이제 물리엔진을 만들어봅시다.

UI를 먼저 그리기, 프론트엔드의 장점

image

물리엔진의 시작, 속도를 만들기

203851155-26e145d2-f7d7-44b8-b95d-f45263007d71

자연스러운 움직임을 위해 힘을 만들기

수학과 과학의 도움을 받기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  caculateCollisionScala(
    speedA: number,
    speedB: number,
    massA: number,
    massB: number,
    repulsiveForce: number,
  ) {
    return (
      (speedA +
        (2 * massB * (speedB - speedA)) / (massA + massB) +
        repulsiveForce * REPULSIVE_COEFFICIENT) *
      COLLISION_COEFFICIENT
    );
  }

참고자료 : 물체의 운동과 2차원 충돌

문제 발생

중력 구현

204280957-1cda2268-5290-414f-a50b-a91830ef28cf

결과

결과물

image2

성능 비교

의의


와글와글 성능 개선 기록

라이트 하우스 점수 개선

image

성능

접근성

SEO

크롬 개발자 도구 성능 측정 및 개선

API 데이터 리렌더링 성능 개선

short polling과 리렌더링

Tanstack Query 활용하기

변경된 데이터만 리렌더링하기