코드스테이츠 SE 부트캠프
SCSS를 활용한 효율적인 반응형 웹 개발(with React)
Co’Talk 기술 발표 영상
Co’Talk이란?
Co’Talk(이하 ‘코톡’)은 코드스테이츠 유튜브에 등록되는 개인 기술 발표 영상이다. 코드스테이츠의 마지막 과정인 4주 파이널 프로젝트를 마칠 때, 프로젝트 발표 영상 뿐만 아니라 개인 기술 발표 영상은 같이 제작한다. 29기부터는 코칭을 받고 유튜브에 등록될 수 있는 코톡 프로그램에 지원할 수 있다.
코톡 프로그램에 대해 처음 알려졌을 때, 반응은 부정적인 반응이 많았다. 왜냐하면 4주 안의 프로젝트 준비만으로도 많이 힘들었기 때문이다. 코톡을 준비한다는 것은 개인 작업의 시간이 보다 많이 필요하다는 것인데 팀 프로젝트 작업 시간과 조율을 잘 해야한다.
우리 팀은 프로젝트 진행 속도가 괜찮았고, 4명 중 3명이 코톡에 긍정적이었기 때문에 팀 프로젝트를 일찍 마무리하고 개인 기술 발표 영상을 준비하기로 얘기나눴다. 일주일 전에 프로젝트 마무리하고 발표 영상까지 주말을 활용해 다 완성한 다음, 버그가 발견해서 고칠 때를 제외하곤 개인 발표 영상 준비 시간을 가졌다.
진행과정
총 2차례의 피드백을 받았으며 처음엔 어떤 주제로 할 지, PPT의 전체 페이지는 어떤 내용으로 채워질지 전달했고(대본 완벽), 두번째 때는 피드백 받은 내용을 수정했고(대본 수정), 세번째 때는 최종 PPT를 전달해드렸다. 최종 PPT가 통과되면 줌을 활용해서 발표 영상을 찍으면 된다.
참고로 주제는 다른 사람들과 겹치면 안됨으로 빠르게 선점하는 것이 좋고, 영상 촬영하는데 시간이 꽤 오래 걸리니 시간 분배를 잘 하는 것이 좋다. 대본을 외우기 쉽지 않으니 카메라 쪽에 대본을 둬야하고 대본을 준비가 완벽했더라도 긴장감 때문에 버벅거릴 때가 있기 때문이다.
나의 경우, 집이 전체적으로 밝은 편이기 때문에 설정된 백그라운드를 이용할 때 얼굴의 반이 배경에 잡아먹힌다. 그래서 영상 녹화 장소도 신경썼다. 안 웃고 읽기만 하면 너무 딱딱해서 웃도록 노력했고, 어색한 내 얼굴이 최대한 작게 보여지게 할려고 했으며 ‘파일’을 ‘폴더’로 읽기도 했지만 이해하지 못 할 말실수 아니면 통과시켰다. (20번 넘게 재촬영했다. 물 필수)
아쉬운 점은 화상 카메라가 오토초점으로 맞춰져서 계속 초점을 맞춰 화면이 일정하지 않고, 녹화할 때 팬 돌아가는 소리가 배경으로 깔렸다는 점이다. 오토초점은 정말.. 화상 카메라 사실 때 주의하세요..
왜 ‘SCSS를 활용한 효율적인 반응형 웹 개발’를 주제로 정했어?
코드스테이츠에서 styled-components를 배운 적이 있다. 하지만 SCSS 문법을 모르고선 styled-components를 제대로 사용하지 못 한다고 생각했다. 그리고 SCSS를 사용했던 이전 기수들의 프로젝트를 보았는데 SCSS 파일이 한 폴더 안에 다 있거나, SCSS 문법을 제대로 활용하지 않은 등의 문제를 발견했다.
그래서 나와 같은 SCSS의 필요성을 느낀 수강생들에게, ‘코드스테이츠에서 강의하는 것처럼 알려주면 어떨까?’란 생각을 하게 되었고 SCSS 문법이 많이 사용된 반응형 구현을 예시를 들어 설명했다.
나는 실질적으로 구현되는 코드를 보고 한 번 만들어본 다음에 이해하는 것이 더 빠르다는 생각을 했다. 왜 빠르게 이해해야한다고 생각했냐면 수강생들이 본다면 파이널 프로젝트에 적용하기 위해서 볼 확률이 높고, 배우는 시간을 줄여주고 실질적으로 프로젝트에 도움되게 , 코드를 넣을 수 있게 하고 싶었기 때문이다.
느낀점
결과적으로 코톡 지원하여 올린 29기 수강생들 중에서 2번째로 높은 조회수를 기록했다. (올린 후 3주 동안의 기준) 처음에 문법이 많아 어렵게 느껴지지만 javascript 문법가 크게 다르지 않고, SCSS 문법을 익힘으로 styled-components를 더 잘 활용할 수 있을 것이기 SCSS를 배우길 추천한다!
참고로 발표 내용 중에 CSS Media Query를 사용하고 1773줄 코드를 작업했다는 것은 내 두번째 프로젝트 ‘매거진 정기구독, conceptzine renewal’ 얘기이다. 그때는 ‘코드의 효율화’는 신경쓰지 않고 ‘코드 구현’에만 신경썼었다.
개인 기술 발표 영상으로 만든 반응형 코드는 내 깃허브에서 확인할 수 있다. (SCSS 반응형 코드 깃허브에서 확인하기) 나의 영상으로 SCSS의 관심이 생기고, 프로젝트에 도움이 되었으면 좋겠다 :)
