📝 순서
1. CSS cubic beizer
2. 서비스 화면이동 플로우 그리기 (feat. Xmind)
3. 우테코 채용행사 참여
1. CSS cubic beizer
요즘 일을 하면서 새로 알게되는 css 속성이 종종 있어 알아가는 재미가 있다. (얼마전에는 transition-property: none 도 알게 되었다.)
이번에는 opacity에 transition을 주다가 ease-in-out 말고 좀 더 세부적으로 속도를 조절하고 싶어서 처음으로 cubic beizer를 사용해보았다.
transition: [property name] [duration] [timing function] [delay]자주 사용하는 "ease-in-out"이 들어가는 자리를 [transition-timing-function]이라고 부른다고 한다. 처음에는 cubic beizer가 뭔가 세부적으로 조정할 수 있도록 해주는 건 어렴풋이 알겠지만 정확한 개념은 몰라 여러 글을 찾아 읽어봤다. 그 중에서 개념 정리가 정말 쉽게 되어있는 글은 Basemenks님의 이 글 이었다. 그리고 cubic beizer의 수치값을 시각적으로 한눈에 볼 수 있는 웹도 있었다.
원래 이 속성을 사용해보려던건 opacity가 0에서 1로 갈때 "느으리이게 > 등장!" 이런 효과를 주는 것이었다. 하지만 생각보다 ease-in-out과의 효과 차이가 미미했다. 다음에는 transition에 delay를 주는 방식으로 다시 시도해보아야겠다.
2. 서비스 화면이동 플로우 그리기 (feat. Xmind)
나는 지금 우리 서비스의 커뮤니티와 커머스 부문의 프론트를 맡고 있다. 그 중 스토어는 기존에는 고도몰 화면을 그대로 사용하다가 자체 UI와 로직을 만들어 씌운지 얼마 되지 않았는데, 운이 좋게도 그 시작부터 내가 작업을 하고 있다.
그런데 기능이 하나 둘 붙으면서 점점 유저 시나리오의 케이스들을 기억해내기 어려워졌다. 예를 들어 로그인 관련 이슈가 생겨서 로그인 화면이 뜨게되는 케이스를 찾아야 할때 하나하나 시나리오를 다시 복기해봐야 했다. (이럴때 프론트 테ㅡ트코드가 필요한건가? 하는 생각이 들기도 한다. 아직 프론트 TDD를 잘 모르는 1인...;;)
그래서 이번에는 Xmind로 스토어의 화면이동 플로우 전체를 정리해보았다. 정리를 하고나니 이슈가 발생할 것이 예상되는 지점을 가시적으로 확인할 수 있어서 좋았다. 앞으로도 화면이 조금 더 추가되면 업데이트 하는 방식으로 계속 이 방법을 이용할 것 같다.
+) 그리고 이런식으로 각 화면과 함께 기획문서를 정리할 수 있는 툴이 있으면 좋겠다는 생각도 들었다. 개발을 하다보면 과거의 기획의도가 무엇이었는지 확인하고 싶을때가 있는데, 그럴때마다 기획문서 목록에서 찾는 것이 비효율적이라고 느낀적이 있었기 때문이다. 취준을 할때에는 딱히 만들고 싶은게 생각이 나지 않았는데, 일을 하다보니 이것저것 만들어보고 싶은게 생겨서 좋다 ㅎㅎ
3. 우테코 채용행사 참여
처음으로 회사 채용 행사에 참여했다. 우아한 테크코스 수료생들을 대상으로 한 채용행사였다. 우테코 교육센터 안에 부스를 차려 진행하는 거라 생각보다 규모는 크지 않았지만 참여하는 기업들의 사이즈는 컸다. 참여 기업에는 네이버 파이넨스, 카카오페이, 토스, AB180, 클래스101 등등이 있었다. 우테코 pro 수료생분들이나 이전 기수 수료생분들도 더러 계셨지만 대부분은 막 수료한 분들이었다.
우리 회사에 관심을 보여주신 개발자분들이랑 개발적인 이야기를 많이 나누진 못했다. 프론트 개발자분들이 많이 없기도 했고, 나는 우리 부스를 홍보하고 소개하느라 바빴다. 하지만 좋았던 점은 우리 서비스를 소개할 때에 어떤 점을 메인으로 소개했을때 더 인상을 남기는지 알게 되었다는 점이다. (누적 이용자수, MAU, 서비스를 시작한 계기, 개발문화: 개발만 하지 않는 개발자 등등) 아쉬웠던 점은 우리 회사에서 채용중인 포지션과 우테코 교육과정의 스택이 맞지 않았다는 것이었다.
다음에 프론트 포지션을 뽑는 날이 온다면 그때는 나도 부스를 방문하시는 개발자분들이랑 개발적으로 다양한 이야기를 할 수 있을만큼 성장해있었음 좋겠다.
