- 간단한 자기소개
- 어떻게 하면 소통을 잘할 수 있나요?
- 성능 최적화 경험
- 나의 성장 => 팀 성장
- 3D 개발: 나의 여정
😃 자기 주도 학습
안녕하세요~
저는 자기 주도적으로 일하며 학습하는 개발자입니다. 웹 개발을 하기전에 유니티를 활용하여 1인 개발로 게임 앱을 출시한 경험이, 학습하는 습관을 길러 주었습니다. 이러한 자세는 회사안에서도 발생하는 문제에 대해 침착하게 대응하고 지속적인 성장을 추구하는 데 도움이 되었습니다.
저는 자기 주도적으로 일하며 학습하는 개발자입니다. 웹 개발을 하기전에 유니티를 활용하여 1인 개발로 게임 앱을 출시한 경험이, 학습하는 습관을 길러 주었습니다. 이러한 자세는 회사안에서도 발생하는 문제에 대해 침착하게 대응하고 지속적인 성장을 추구하는 데 도움이 되었습니다.
활동
(주)아이리브
패스트 캠퍼스 (r3f) 강사
(주)더즈 인터랙티브
마포구청일자리지원과
(웹,앱개발)Unity 게임 개발
(IOS, AOS) 배포뉴미디어아트
(Processing JAVA)
어떻게 하면 소통을 잘할 수 있나요?
아무래도 웹에이전시에 다녔던 저는 여러 고객사의 다양한 유형의 기획자, 디자이너분들과 소통을 한 경험이 많습니다. 그때마다 저는 소통이 잘 되는 사람으로 평가되는 것 같습니다. 하지만 누군가 저에게 '어떻게 하면 소통을 잘할 수 있나요?' 라고 물어본다면 어떻게 대답해야 할지 고민이 됩니다. 그래서 질문에 대답하기 위해서 소통 관련 인프콘 컨퍼런스, it 서적 등을 참고하며 어떻게 하면 소통을 잘할 수 있는가?에 대해 고민해 봤습니다.
제가 내린 결론은 우리는 '문제 해결을 위해 모여서 일하고 있다'는 것을 기억해야한다는 것입니다.
기획자가 개발자에게 일을 더 많이 시키려고 기획을 추가하는 것이 아니고 디자이너가 개발자를 고생시키기 위해서 어려운 디자인을 하는 것이 아닙니다. 모두 좋은 서비스를 만들기 위해서 나아가는 것입니다. 마찬가지로 개발자가 안된다고 말하는 이유는 하기 싫어서가 아니라 UX 적으로 기획적으로 이상하기 때문일 것입니다. 그렇기 때문에 우리는 그것이 왜 안되는지 설명해 줄 수 있는 개발자가 되어야 합니다.
기획자의 요청에 맡게 변경하기가 어려운 개발이 있습니다. 그럴 때는 어려운 이유와 실행할시 걸리는 공수를 설명하고 다른 방향을 제시해야 합니다. 물론, 다른 방향을 제시할 수 없다면 일정을 잡고 침착하게 일을 진행해야 합니다.
기획자의 말뜻을 알아들을 수가 없을 때가 있습니다. 그럴 때 “00님 제가 이해한 바로는 7월 31일까지 프로젝트 상품 카테고리 추가 건 진행하고 개발서버에만 배포하는 것이 맞을까요?“재차 확인 요청하는 방식은 굉장히 유용하고 실수를 사전에 줄일 수 있습니다.
제가 내린 결론은 우리는 '문제 해결을 위해 모여서 일하고 있다'는 것을 기억해야한다는 것입니다.
기획자가 개발자에게 일을 더 많이 시키려고 기획을 추가하는 것이 아니고 디자이너가 개발자를 고생시키기 위해서 어려운 디자인을 하는 것이 아닙니다. 모두 좋은 서비스를 만들기 위해서 나아가는 것입니다. 마찬가지로 개발자가 안된다고 말하는 이유는 하기 싫어서가 아니라 UX 적으로 기획적으로 이상하기 때문일 것입니다. 그렇기 때문에 우리는 그것이 왜 안되는지 설명해 줄 수 있는 개발자가 되어야 합니다.
기획자의 요청에 맡게 변경하기가 어려운 개발이 있습니다. 그럴 때는 어려운 이유와 실행할시 걸리는 공수를 설명하고 다른 방향을 제시해야 합니다. 물론, 다른 방향을 제시할 수 없다면 일정을 잡고 침착하게 일을 진행해야 합니다.
기획자의 말뜻을 알아들을 수가 없을 때가 있습니다. 그럴 때 “00님 제가 이해한 바로는 7월 31일까지 프로젝트 상품 카테고리 추가 건 진행하고 개발서버에만 배포하는 것이 맞을까요?“재차 확인 요청하는 방식은 굉장히 유용하고 실수를 사전에 줄일 수 있습니다.
성능 최적화
L사 백화점 리뉴얼 운영/구축
실무에서 성능 향상 요구를 받은 것은 L사 백화점 운영때 였습니다.
구축 당시 webpack을 통해 js와 css파일을 압축한 적이 있었지만 아직도 메인의 초기 진입 속도는 매우 느렸습니다. 고객사의 요청은 정확했습니다. PageSpeed Insights에서 40프로인 노란색을 70프로 까지 만들어 달라는 것입니다.
그래서 PageSpeed Insights를 활용하여 성능을 체크하고 성능을 개선을 하게 되었습니다. 픽쳐 태그를 활용하여 이미지를 webp 파일로 변경하고 폰트 파일을 최적화 하여 woff2로 변경하였습니다. 또한 불필요한 코드들을 없애는 방식으로 개선해 갔습니다. 결국 아래 그림 처럼 성능을 70프로로 달성하게 되었습니다.
구축 당시 webpack을 통해 js와 css파일을 압축한 적이 있었지만 아직도 메인의 초기 진입 속도는 매우 느렸습니다. 고객사의 요청은 정확했습니다. PageSpeed Insights에서 40프로인 노란색을 70프로 까지 만들어 달라는 것입니다.
그래서 PageSpeed Insights를 활용하여 성능을 체크하고 성능을 개선을 하게 되었습니다. 픽쳐 태그를 활용하여 이미지를 webp 파일로 변경하고 폰트 파일을 최적화 하여 woff2로 변경하였습니다. 또한 불필요한 코드들을 없애는 방식으로 개선해 갔습니다. 결국 아래 그림 처럼 성능을 70프로로 달성하게 되었습니다.
CASSCOOL 카스 쿨
카스 쿨 프로젝트에서는 네이버 지도에 많은 양의 마크를 세워야 했습니다. 대량의 마크를 세워야 하기 때문에 지도는 버벅거리는 현상이 발생 했습니다. 지도에서 화면에 보여지는 위치에만 그리는 방법을 사용하였지만 그것만으로는 부족했습니다.
그래서 조사를 하던 중 지도 시스템에 '마커 클러스팅'이라는 개념이 있다는 것을 알게 되었습니다. '마커 클러스팅'은 지도 상에 마크업들이 여러 개가 있을 때 그룹화를 시켜서 사용자에게 보여주는 것입니다. 이 방법을 기획자와 팀장님께 제한하였고 네이버 지도 깃허브를 통해서 관련 js 파일을 확인하고 프로젝트에 적용시켰습니다. 이로 인해 지도의 버벅거림이 사라지고 카스 쿨 이벤트를 하는 매장을 찾으려는 사용자들에게 좋은 사용자 경험을 선사할 수 있게 되었습니다.
그래서 조사를 하던 중 지도 시스템에 '마커 클러스팅'이라는 개념이 있다는 것을 알게 되었습니다. '마커 클러스팅'은 지도 상에 마크업들이 여러 개가 있을 때 그룹화를 시켜서 사용자에게 보여주는 것입니다. 이 방법을 기획자와 팀장님께 제한하였고 네이버 지도 깃허브를 통해서 관련 js 파일을 확인하고 프로젝트에 적용시켰습니다. 이로 인해 지도의 버벅거림이 사라지고 카스 쿨 이벤트를 하는 매장을 찾으려는 사용자들에게 좋은 사용자 경험을 선사할 수 있게 되었습니다.
본인의 성장이 팀의 성장
2022년 마포구청 청년 일자리 사업단에서 근무할 때 프론트 3명과 리액트 스터디 주도해서 한 적이 있습니다. 방식은 (벨로퍼트 리액트) 강의 자료를 토대로 일주일에 두 번씩 실습한 코드를 서로 리뷰합니다. 또한 알게 된 점을 발표하고 서로 질의응답하는 시간을 가집니다. 이렇게 스터디를 해보면서 알게 된 점은 두 가지였습니다.
첫 번째는 학습 효과입니다. 발표를 해야 하는 책임감은 공부를 대충 할 수 없게 해주고 이해하지 못했던 부분들은 팀원들과 나누면서 알 수 있게 됩니다.
두 번째는 선택과 집중입니다. 리액트뿐만 아니라 웹에 대해서도 아직 부족한 사람들끼리 모였기 때문에 사람들은 같은 강의 자료를 봐도 관심사가 다르게 공부해 온다는 것입니다. 이것은 폭이 넓어져서 단점일 수도 있겠지만 저한테는 전부 공부할 수 있게 되어 오히려 좋았습니다.
이렇게 스터디를 같이 진행한 팀원들과 구청에서 두 가지 프로젝트를 나누어 진행할 때 프론트단 일을 잘 수행할 수 있었습니다.
첫 번째는 학습 효과입니다. 발표를 해야 하는 책임감은 공부를 대충 할 수 없게 해주고 이해하지 못했던 부분들은 팀원들과 나누면서 알 수 있게 됩니다.
두 번째는 선택과 집중입니다. 리액트뿐만 아니라 웹에 대해서도 아직 부족한 사람들끼리 모였기 때문에 사람들은 같은 강의 자료를 봐도 관심사가 다르게 공부해 온다는 것입니다. 이것은 폭이 넓어져서 단점일 수도 있겠지만 저한테는 전부 공부할 수 있게 되어 오히려 좋았습니다.
이렇게 스터디를 같이 진행한 팀원들과 구청에서 두 가지 프로젝트를 나누어 진행할 때 프론트단 일을 잘 수행할 수 있었습니다.
더즈인터랙티브 회사를 다니면서도 주말에 three.js로 마리오 “개발자의 삶”이라는 프로젝트를 진행하였습니다. n년차를 주사위로 고르고 다음 페이지에서 n년차를 url파라미터로 받아서 마리오 캐릭터를 마우스로 움직이면서 개발자의 삶을 탐험하며 버섯을 3개 모으는 인터랙티브한 페이지입니다. 간단한 로직이었지만 좋은 기회로 패스트 캠퍼스에서 react-three-fiber 강의 제의를 받았습니다. 처음에는 부족한 제가 강의를 해도 되나 걱정이 많았습니다.
그 걱정을 없애기 위해서 잘 모르는 부분을 공부하고 발표자료를 만들고 코드의 순서를 나누다 보니 더 좋은 개발자로 한걸음 나아갈 수있게 된것 같습니다. 그리고 알게된 지식들을 사람들에게 언제나 나누었습니다. 이러한 과정은 제가 회사를 다니면서 강의 준비를 하면서도 팀내에 긍정인 영향을 끼치게 하였습니다.
그 걱정을 없애기 위해서 잘 모르는 부분을 공부하고 발표자료를 만들고 코드의 순서를 나누다 보니 더 좋은 개발자로 한걸음 나아갈 수있게 된것 같습니다. 그리고 알게된 지식들을 사람들에게 언제나 나누었습니다. 이러한 과정은 제가 회사를 다니면서 강의 준비를 하면서도 팀내에 긍정인 영향을 끼치게 하였습니다.
3D 개발: 나의 여정
저는 현대 미술 작업 활동을 할때 모델링과 3D 프린터를 다루기도 했습니다. 덕분에 예술대학 학생들에게 3D 프린터 강의를 한 경험이 있습니다.
또한 Unity를 활용하여 iOS와 Android 플랫폼에 3D 게임을 출시 했던 경험 있습니다.
그래서 웹 개발자로서 전환 이후에도 취미로 three.js 작업을 해오고 있었습니다. 그러던 와중에 온라인 강의 플랫폼에서 강사 제의가 왔고 3D 개발의 즐거움을 학생들에게 나눌 수 있게 되었습니다.
또한 Unity를 활용하여 iOS와 Android 플랫폼에 3D 게임을 출시 했던 경험 있습니다.
그래서 웹 개발자로서 전환 이후에도 취미로 three.js 작업을 해오고 있었습니다. 그러던 와중에 온라인 강의 플랫폼에서 강사 제의가 왔고 3D 개발의 즐거움을 학생들에게 나눌 수 있게 되었습니다.
About
1:56:38