미리 시작하다.


금요일 2주 프로젝트를 마치고, 토요일 하루를 정말 푸욱~ 쉬었다.


그리고 바로 오늘인 일요일. 팀원들과 오후 1시에 다시 만났다. 만난 이유는 이제 대망의 파이널 프로젝트를 위해 SR 회의를 하기 위해서이다.


사실 파이널 프로젝트는 다음주 화요일부터 팀원이 정해지고 레포지토리가 주어지는데 우리는 팀원이 이미 짜여져있는 만큼 미리 시작할 수 있었다! 👍


그런데 우리뿐만 아니라 이미 대부분 동기들은 팀이 정해져있기 때문에 각자 팀원들과 미리 SR 회의를 진행하는 듯했다…


본론으로 들어가, 나는 오늘 팀원들과 Miro 툴을 사용해 사이트 맵을 만들어보고, figma 툴을 사용해 미리 디자인까지 만들어 보았다!! 2주 프로젝트때는 와이어프레임도 없이 프로젝트를 하는 바람에 개발을 하면서 중간중간에 디자인도 신경쓰느라 정신이 없었는데 이번에는 확실하게 기획을 하고 시작해서 마음이 놓인다.


디자인하나 없는 개발은.. 2주 프로젝트때 뼈저리게 느꼈다.. 정말 목적지없는 개발은 고통 그 자체였다..


어찌나 저찌나 이번에는 완벽하게 기획을 구성하고 시작할 것이다!!





Miro - site map



site map


우리 프로젝트는 사이드 프로젝트를 하고 싶어하는 주니어 개발자들을 대상으로 만들어진다. 이 웹사이트는 팀원을 모집하는것과 워크스페이스 공간(칸반보드와 채팅기능, 캘린더, 그리고 줌 기능이 있는 공간)까지 한 웹사이트에서 이루어진다.


어떻게 보면 4주 조금 안되는 시간에 다 소화하기에는 정말 볼륨이 큰 웹사이트일 수도 있지만, 우리는 서로 할 수있다고 믿고 도전하게 되었다.





Miro - flow chart


사이트맵을 다 만들고 그 다음은 기능 flow chart를 만들었다.

2주때와는 다르게 최대한 간단하게 만들어보자 했는데 그나마 생각했던 것 보다 최대한 심플하게 나온 것 같다.



flow chart


최대한 심플하게 한 것 같아도.. 뭔가 많은거 같긴하다. 조금 더 자세히 봐야겠다.



flow chart2


flow chart중에서도 위쪽에 해당하는 프로필부분과 팀원 모집하는 부분이다. 우리는 이런식으로 1차원적인(?) 기능 flow chart를 만들어 보았다! (사실 저기서 더이상 복잡하게 하고 싶지 않았다…)



flow chart3


로그인 인증 부분인데, 2주차때도 했었는데 또 다시 플로우차트를 짜봐도 살짝 헷갈리는건 마찬가지였다. 결국 훌륭한 팀원들 덕분에 잘 마쳤지만 이번에는 로그인 인증 부분 때문에 고생하는 일이 없었으면 좋겠다…🙏🙏🙏





figma - design


figma1


먼저 팀원들과 프로젝트를 하려면 workspace 페이지로 들어가야하는데 들어가기전에 프로젝트를 생성해야 한다.

위에 디자인한 것은 바로 프로젝트를 생성하는 페이지이다. sweet.io 디자인이 너무 마음에 들어서 참고해서 만들었다.



figma4

figma3


그다음은 프로젝트를 생성하게 될 때 보여지는 페이지이다. 모두 마진과 패딩 그리고 색깔까지 다 정해서 만든 것이다.

우리는 이대로 프로젝트에서도 같은 마진, 패딩 색깔을 사용할 예정이다.



figma4


그 다음은 로그인 모달창을 만들었는데, 지금보니 수정이 많이 필요해 보인다.






마무리


이제 workspace 디자인과 그다음 전체적으로 와이어프레임도 짜야한다. 기획단계인데도 정말정말 할 것이 많다.. 기획에만 최소 3~4일은 쏟아부을 예정이다!

코드스테이츠 마지막 관문 파이널 프로젝트! 4개월동안 배워온 모든 것을 쏟아 붓는 결정적인 시기이다. 화이팅하자!!