190327-0330_TIL(프로젝트, 개발 프로젝트 단계 특강)

3월 30일 (토)

• 오늘은 패스트캠퍼스에서 주최하는 기초개발특강(UX, UI, 개발 프로젝트 단계)를 듣고 왔다. 자리가 제한되어 있었기 때문에 신청한 사람들 중에 선착순으로 들을 수 있었는데 다행히 제한인원 안에 들었다. 이 특강을 신청한 이유는 평소에도 실제 개발 업무에서 프로젝트가 어떻게 진행되는지 궁금했기 때문이다. 오늘 강의로 그 궁금증을 풀 수 있을지 걱정 반 기대 반이 었는데 아주 만족스러운 내용의 강의였다. 오늘 배운 내용을 모두 정리하기에는 그 양이 너무 방대할 것으로 예상되기 때문에 강사님이 강조한 부분과 내 기억에 많이 남는 부분 위주로 정리하겠다. 웹 서비스 개발 프로젝트의 단계는

• 기획 - 디자인 - 개발 - 테스트 - 배포 나뉜다. 그중에서도 디자인 - 개발 - 테스트 가 개발단계로 분류된다. 프론트엔드 개발자는 당연히 개발 업무가 주업무이다.

• 동료 기획자, 디자이너, 개발자와의 원활한 의사소통이 중요하다. 그러기 위해서 기획자나 디자이너가 자주 쓰는 용어들을 알아두면 좋다.

• 각 요소 하나 하나에만 신경쓰지 말고 전체적인 flow도 생각하기, ux를 고려할 때 웹이나 앱 안에서만 갇혀서 생각하지 말고 실제 사용자가 되어 생각해보기. 예) 쏘카 이용자들은 차를 처음 탔을 때는 쏘카 앱을 잘 보지 않고 목적지만을 향해 간다. 따라서, 전 사용자에 대한 평가를 차를 타고난 직후가 아닌 차를 탄 이후에 하게 하는 것이 좋다.

• github issue page, 코드리뷰, Scrum Board, Kanban Board 등을 통해 협업하고 의사소통하기

• 프로젝트 매니징 : IA 설계, WBS, Gantt-Chart, Agile

• 처음에 이런 저런 기능을 붙이기 보다는 핵심 기능 한가지를 찾아내고 그 기능이 정말 잘 돌아가게 만든 후 확장하기 예) toss

3월 29일 (금)

• 오늘은 프로젝트의 마지막 날이다. 기능적인 부분들은 어제 완료를 했기 때문에 오늘은 세부적으로 디자인 요소를 변경하고 팀원들과 코드를 합치는 일을 하였다. 먼저 화면 전체를 채우고 있는 이미지 요소의 크기 단위가 %로 되어있던 것을 어느 브라우저에서나 화면에 꽉 차게 보이게 하기위해서 vh 단위로 바꾸었다. css 단위에 대해서는 아직 부족한 부분이 많기 때문에 앞으로 더 공부해 나갈 것이다. css 단위 참고 블로그 그리고 나서 각자의 코드를 합치기 전에 주석을 비롯해서 정리하고 git을 이용하여 팀원들이 pull request를 하고 pm인 내가 merge를 승인하여 코드를 합쳤다. 다행히도 conflict 난 부분이 많지 않아서 금세 안정적으로 프로젝트 결과물을 제출할 수 있었다.

• 프로젝트를 진행하면서 느낀점이 많이 있었다. 첫번째로 무작정 코딩을 진행하기 보다는 그 전에 확실히 어떤 라이브러리를 사용할 것인지, 어떤 기능을 만들 것인지, 전체적인 플로우는 어떻게 진행될 것인지 등을 오랜 시간을 들여 하는 것이 중요하다는 것이다. 코딩을 하는 시간이 짧아지면 왠지 모를 불안감이 생기지만 분명히 시간상으로도 프로젝트의 완성도를 생각할 때에도 무작정 코딩하는 것보다는 미리 완벽히 설계하고 들어가는 것이 중요하다.

• 팀원들과의 의사소통이 정말 중요하다. 팀원들끼리 현재 진행상황이나 문제점, 새로운 아이디어 등을 공유하면서 프로젝트를 진행하면 훨씬 높은 완성도의 결과물이 나올 수 있을 것이라 생각한다.

3월 28일 (목)

• 오늘은 어제 count 변수를 증가시키며 동적으로 생성한 클래스를 이용한 코드 에서 포스트잇을 삭제하였다가 다시 만들 때 와 로드 할 때 문제가 생겨서 문제를 해결하는데 많은 시간을 소비하였다. 문제해결을 하기 위해서 먼저 문제의 원인을 파악하는데 집중하였다. 문제의 원인은 비교적 간단하였다. 삭제할 때와 로드할 때 count 변수의 어떤 변화도 주지 않기 때문이었다. 그래서 삭제할 때는 count– 를 주고 road 할 때는 새로운 조건을 주어 문제를 해결하였다.

• 프로젝트의 마지막 기능인 배경 이미지를 변경하는 기능을 만들었다. 배경이미지를 img태그를 이용하여 준 것이 아니라 background: url attr()을 사용할 수 없었다. 그래서 css()를 활용하여서 썸네일 이미지를 클릭하면 그 이미지로 배경이 바뀌는 기능을 구현하였다.

3월 27일 (수)

• 오늘은 to-do-list의 핵심 기능인 메모(?)을 만들어서 입력, 삭제, 로컬스토리지 저장 기능까지 완료하였다. 우리 팀 to-do-list의 특징적인 부분은 글만 보이게 하는 것이 아닌 동적인 느낌을 주기 위해서 글을 입력하면 포스트잇이 화면에 생성된다. 이 부분이 기존 to-do-list보다 어려운 부분이었다. 기존 to-do-list는 list 각자 따로 css를 줄 필요가 없이 li 태그나 p 태그 등을 활용하면 알아서 밑으로 정렬되었지만 포스트잇은 각각의 위치가 잡혀 있어야하고 그렇게 하기 위해서는 각각 css를 이용하여 위치를 잡아주어야 했다. 그래서 처음 생각한 부분이 class를 각자 따로 주고 그 class 각각의 css를 주는 것이었다. 클래스를 동적으로 생성하기 위하여 count 변수 숫자를 증가시키고 그 count 변수와 문자열을 더한 값을 변수에 저장하여 addClass()를 통하여 각각의 포스트잇에 각기 다른 class를 추가하였다. 그리고 로컬스토리지에 저장할 때 class를 저장하고 불러올 때 class를 불러오게 하여서 포스트잇 각각의 위치를 저장하고 불러올 수 있게 하였다. 이 방법이 좋은 방법인지는 아직 모르겠지만 마음에 들지 않는다. 앞으로 더 공부해나가면서 더 좋은 방법이 떠오른다면 꼭 변경해보고 싶은 코드이다.