본문 바로가기

[내일배움캠프] 프로덕트 디자인 8기/WIL(Weekly I Learned)

[WIL] 1주차 24.12.16(월) ~ 24.12.20(금)

[WIL]

 

FACTS (사실, 객관)

지난 주에 수강한 노코드 강의를 바탕으로 일주일간 개인 과제를 진행했다. 이번 과제는 웹플로우(Webflow)를 활용해 랜딩 페이지를 똑같이 구현하는 것이었다. '당근', '웨이브', '노션' 세 가지 중 하나를 골라서 똑같이 구현하거나, 원하는 랜딩 페이지를 과제 조건에 맞춰 만드는 것도 가능했다. 나는 코딩에 대해 잘 모르기 때문에 처음에는 가장 난이도가 낮은 '당근'을 해볼까 생각했지만, 그래도 배운 것들을 잘 활용해보고 싶은 마음에 '웨이브'를 선택해서 과제를 진행했다.

 

FEELINGS (느낌, 주관)

실 노코드 강의를 수강하고 웹플로우 개인 과제를 잘 해낼 수 있을 거라는 자신감이 있었다. 웹플로우 자체는 코딩보다 쉽게 느껴졌기 때문이다. 하지만 막상 과제를 시작해보니 생각했던 것처럼 쉽지만은 않았다. 얘기하자면 길지만, 가장 애를 먹었던 두 가지 문제가 있었다.

첫 번째 문제는 에어테이블과 웹플로우 CMS를 연동해주는 기존의 플러그인이 갑자기 서비스를 종료한 바람에 새로운 플러그인을 사용해야 했다는 것이다. 플러그인의 기본 기능 자체는 비슷했지만, 추가적으로 생긴 옵션 같은 게 있어서 한참을 헤맸다. 수십 번의 시도 끝에 결국 연동에 성공할 수 있었다. 시간이 오래 걸렸지만 연동이 되고 나니 뭔가 뿌듯한 마음이 들었다.

두 번째 문제는 웹플로우에서 기본으로 제공하는 슬라이더의 디자인을 바꾸는 데 한계가 있었다는 점이다. 웨이브의 랜딩 페이지에 있는 캐러셀 디자인과 똑같이 구현하기 위해서는 웹플로우의 슬라이더 디자인을 변경해야 했는데, 이 부분에서도 시간이 엄청 오래 걸렸다.

사실 처음에는 몇 시간 시도 끝에 결국 그냥 슬라이더처럼 보이는 화면만 구현하는 것으로 끝내려고 했다. 하지만 뭔가 좀 더 고민해보면 해결할 수 있을 것 같다는 생각에 다시 연구를 시작했다. 그동안 알게 된 웹플로우의 기능과 검색해서 찾은 온갖 지식을 동원해 결국 웹플로우의 슬라이더를 응용하여 웨이브의 캐러셀 디자인과 거의 흡사한 형태의 결과물을 만들어낼 수 있었다. 100% 완벽한 방법은 물론 아니겠지만, 그래도 코딩을 모르는 내가 이 정도 구현한 것으로 충분히 만족한다.

이것들 외에도 클래스 명을 지정하는 것에서도 애를 먹었다. 수많은 요소들에 클래스를 지정해주어야 하는데, 클래스를 공유하는 것들끼리 충돌이 나지 않도록 콤보 클래스를 사용하고, 또 익숙하지 않은 영어로 클래스 명을 모두 입력하려니 뭔가 후반으로 갈수록 클래스 명이 엉망으로 지어지고 있는 느낌이 들었다. 나는 알아볼 수 있지만, 남들도 이걸 봤을 때 알아볼 수 있을까? 분명히 공통으로 쓰는 명칭이 있을 텐데, 찾아보고 꼭 공부해야겠다는 생각이 크게 들었다.

 

FINDINGS (배운 것)

이번 과제를 통해 웹플로우와 같은 노코드 툴을 다루면서, 그동안 정확하게 이해하지 못했던 것들을 많이 배웠다. 특히 에어테이블과 웹플로우의 연동이나 웹플로우 내에서의 디자인 커스터마이징처럼 복잡한 작업을 하면서 문제 해결 능력을 키울 수 있었다. 코딩을 전혀 모르던 내가 원하는 결과물을 만들어낼 수 있었다는 점에서 자신감을 얻었고, 기술적인 개념도 조금씩 익혔다. 처음에는 "개발자와 소통하기 위해 코딩을 배워야 한다"는 말이 그저 그런 말로 들렸지만, 직접 경험해보니 그 말이 정말 중요하다는 것을 깨달았다. 앞으로는 디자인과 개발 간의 원활한 소통을 위해 계속해서 기술적인 지식도 공부해야겠다고 다짐했다.

 

FUTURE (미래)

다음 주부터는 리액트를 배우기 시작한다. 리액트를 처음 배우는 만큼 어려울 수도 있지만, 이번 과제에서 얻은 경험을 바탕으로 차근차근 익혀나가고 싶다. 또한, 새로운 팀원들과 함께 작업하게 되는데, 모두와 잘 지내면서 원활하게 협업할 수 있도록 노력할 것이다. 팀원들과의 소통과 협력이 중요하다는 걸 그동안의 경험에서 많이 느꼈기 때문에, 더 좋은 관계를 만들어가고 싶다. 더불어, UI 집중반 수업도 시작되는데, 그곳에서 더 많은 것을 배우고 배운 내용을 추후 실무에서도 잘 적용할 수 있도록 열심히 참여해야겠다.

 

 

 

[KPT]

Keep (좋았던 부분, 계속해서 유지되었으면 하는 부분, 현재 만족하고 있는 부분)

개인 과제를 진행하면서 막히는 부분이 있을 때 서로 도와주었던 것과, 좋은 정보를 발견하면 서로 공유해줬던 점. 

또한 잠깐이라도 자리를 비울 일이 생겼을 때 미리 공지한 것. 

 

Problem (잘되지 않았던 부분, 문제라고 생각하는 부분, 불편하게 느끼는 부분)

아무래도 2주라는 짧은 기간과 개인 과제 위주의 시간이었기 때문에 소통할 시간이 부족했던 점과, 더 친해질 수 있었으면 좋았을텐데 주어진 시간이 길지 않아서 그러지 못해 아쉬운 마음이 든다.

 

Try (Problem을 해결할 수 있도록 실천해 보았으면 하는 부분, 문제에 대한 해결책, 당장 실행 가능한 것)

앞으로는 팀 간의 커뮤니케이션을 강화할 수 있도록 일정에 정기적인 소통 시간을 추가하거나, 과제 진행 상황을 공유하는 시간을 마련해보는 것도 좋을 것 같다.