카페 W 프로젝트 개발
카페 W는 고정형 웹 개발을 위한 프로젝트로서 HTML/CSS를 최대한으로 활용하여 개발하였다.
카페 W의 디자인
완성된 UI 디자인을 Figma 도구를 통해 배포 받고 레이아웃 구성에 활용하였다.
cafe W figma 링크: cafeW figma
데스크탑 UI는 1440px+ 급으로 설계하였다.
Desktop UI
- Design System
UI 개발
- Developer — 제작된 UI 디자인을 토대로 모바일/데스크탑 UI를 개발합니다.
- 효율적인 코딩에 적합한 Visual Studio Code 도구를 활용하였다.
- 모두를 위한 디자인을 지향하며 개발하였다. (Universal Design, A11Y)
- 시멘틱 마크업을 통해 웹 접근성을 최대한 끌어내도록 노력하였다. (HTML5 + WAI-ARIA)
- 소스 버전을 Git을 통해 관리하여 효율적인 개발 작업, 분배, 병합 환경을 구축하였다. (Git)
- issue 등록을 통한 작업 분배화 실시간으로 현황을 파악할 수 있는 환경을 구축하고 개발하였다. (GitHub)
Semantic Markup (HTML5 + WAI-ARIA)
Version Control System (Git + GitHub)
참여인원
- @yhun940731 최용훈
- @ahnanne 안예인
- @moripark32 박세리
느낀 것
팀장으로 참여하여 참 많은 우여곡절을 겪었다. 그래도 팀장이어서 더 책임감을 느끼고 보람찼다. 결과적으로 시간분배부터 팀장으로서의 git 사용, 더 많은 분량 등 최대의 노력을 쏟아낼 수 있었던 좋은 기회였다.
merge하다가 꼬여서 고생했다. 앞으로 진짜 신중하게 검토해야하는 습관을 들여야한다.
git bash에서 명령어 입력할 때 생각을 하고 하자. 잘 못 입력해서 이미지 파일을 다 날렸다.
방금 말한 것과 같이 git 과 git hub를 처음 사용해보면서 위와 같은 시행착오를 겪으며 어렵고 불편했지만 갈 수록 널리 쓰이는 이유를 알게됐다.
시멘틱 마크업을 알게되니 div와 span을 쓰면 불안해진다. 하지만 시멘틱 마크업도 중요하지만 쓸 때는 쓰는 결단력이 필요하다.
절대값으로 레이아웃을 구성하면 너무 찝찝해서 최대한 안 쓰려고 했는데 능력의 한계로
쓸 수 밖에 없을 때 좀 더 깊은 레이아웃 구성 방법에 대해 간절함을 느꼈다.이번 프로젝트에서 css를 적용할 때 스타일 적용하면서도 더 효율적인 방법이 있을 텐데를 고민할때가
괴롭지만 참 재밌었다.시간이 더 있었다면 퀄리티가 더 높았겠지만 그건 변명이다. 결국 정해진 기한 내에 하는 것도 실력이다.
크로스 브라우징은 너무 어려워서 거의 진행하지 못하였다. 좀 더 섬세한 부분도 완성하고 싶었지만 시간관계상 못 하지 못해 많이 아쉬웠다. 별개로 앞으로 IE를 사용하는 사람이 있으면 도시락 싸들고 말려야겠다는 결심을 했다.
결과는 과정의 노력을 확인하는 수단일 뿐, 집착하고 얽매일 필요가 없다. 때때로 힘들었지만 점점 결과를 보여갈 때 느꼈던 기분과, 과정을 통해 얻은 새로운 지식과 경험이 중요하다고 생각한다. 잘하는 것도 중요하지만 과정을 통해 전보다 나아졌다는 것이 중점이라고 생각하며 프로젝트를 마친다.