[PE 1] 프론트 체험기(부제: 프론트에 관심이 있는 사람들에게...)

이전에 2-3개 정도의 프로그램을 진행했지만 이번부터 프로젝트에 대한 회고록을 작성해야 내 앞날에 발전이지 않을까 싶어서 이렇게 작성해봅니다.. 앞으로 자주 회고록 쓰면서 우직한 목수같은 개발자가 되어보자. 솔직히 이번 회고록은 도움이 되는 측면은 많이 없다. 하지만 혹시나 프론트에 관심이 있으신 분들에게 도움이 될 겸, 내 프로젝트의 역사를 남겨둘 겸 작성하는 것이니 참고해주길 바란다.

 

내 스타일대로 조금 날 것(?)의 말투로 작성할테니 이해해주시길 바랍니다.

 

내가 프로젝트를 시작한 계기

규모가 큰 프로젝트를 만들었다기보다는 예대분들과 함께 하는 대회에서 만든 프로젝트이다. 
(1)나와 다른 직종, 전공을 가진 사람과 함께 프로젝트를 해나가는 것에 목적을 두었고, 나름 성공적으로 마친 프로젝트인 것 같다.

개발자3명, 디자이너3명으로 구성된 팀이었다.

 

또 내가 백엔드 개발자를 목표로 하는 학생이기에, (2)프론트엔드에 대한 경험이 앞으로 개발할 때, 조금이나마 도움이 되는 경험으로 남으리라 생각하기도 했다.

"프론트엔드 개발자보다는, 백엔드, 풀스택 개발자를 해야지..."하고 생각하게 된 프로젝트이기도 하다.

 

프로젝트 소개

• 제목: '이리오너라~'이다. 
• 계기: 우리는 궁궐에 대한 사람들의 무관심을 문제삼았고, 이를 홍보하기 위해 디자인에 초점을 많이 맞춘 인터렉티브한 웹페이지를 만들고자 했다. 또 궁궐에 대한 기본지식을 인상적으로 전달하고, 다양한 궁궐에 가보고 싶도록 하는 호기심 자극에 초점을 맞췄다.
• 아래 그림은 프로젝트의 로고이다.

 

프로젝트 진행기간

2024. 6. 1. ~ 2024. 10. 4.이며, 디자이너의 초안완성때문에 실질적으로는 7~8월 정도부터 개발을 시작했던 것 같다.

 

프로젝트 기술 스택

- React

- Firebase

 

프로젝트 기능 설명

사용자에게 인터렉티브하고 경험해보지 못했던 독특한 웹페이지를 구현하는 것에 초점을 많이 맞췄다.

일반적으로 화면을 클릭해서 다른 페이지를 이동하기보다는 스크롤을 통한 페이지를 구현했다.

해-달의 이동, 배경의 자연스러운 전환을 스크롤을 통해 실시간으로 반응하도록 구현했다.

이런식으로 화면 초반에는 다 스크롤으로만 이동하도록 하여 사용자로 하여금 독특한 웹페이지의 인식을 심어주고자 했다.

독특한 만큼 내게 기징 힘들었던 과제이기도 했다....

창덕궁 내의 궁 표현

스크롤이 끝난 후에는 궁궐을 선택해, 해당 궁궐의 다양한 궁을 2D 이미지로 구경할 수 있고, 궁을 클릭하면 궁만의 특징을 간략하게 소개했다.

그 외에도 퀴즈나 행사, 동선 등을 추천해주도록 하며 궁궐에 대한 다양한 정보 제공을 수행했다.

 

프로젝트 후기 및 배운 점

난 백엔드가 좋아.

내가 개발자의 길을 걷고 싶었던 이유는 전문적인 지식을 얻는 점이 성장한다는 경험으로 이어지는 것이었다. 내게 쌓인 지식이 곧 내 전문성임을 느끼고, 성장한 내게 뿌듯함을 느꼈다. 하지만 프론트엔드를 하면서 백엔드 개발만큼의 성장을 느끼지 못했다. (그 점은 CS를 직접적으로 접근할 일이 많이 없고, 브라우저 레벨에서 작업하다보니 이렇게 느끼지 않았나 싶다.) 

 

사실 이 문제는 가장 처음인 프로젝트 방향부터 많이 무너졌다고 생각한다. 위에서 밝힌 목표(빨간색)처럼, 인터렉티브한 웹페이지를 만들다보니 리엑트를 많이 활용해보지 못한 채로 css와 마구 만들어낸 state관리에만 신경을 쓴 프로젝트가 되었다.
특히 개발팀 3명 전체가 React를 사용한 경험이 적었고, 나는 아예 처음 시도하는 처지였기에 개발 속도가 더뎠던 것이 기억에 남는다.

 

가장 중요한 백엔드와의 통신은 아예 없다. 정확히는 백엔드 서버가 아예 없다. API통신이라도 했으면 '아 프론트단에서는 이런식으로 데이터를 받는구나. 아니면 백엔드 API서버는 프론트에서 이렇게 호출하는구나?' 등의 다양한 경험을 쌓을 것을 예상했지만 실상은 리엑트보다 마크업 언어를 잘 다루게 되지 않았나 싶다.

 

추가로 디자이너아 소통하는 것이 쉽지 않았다. 원하는 기능이 허상(?)을 말하는 경우도 많았고, 디자인을 자주 바꿔서 이를 맞춰주는 과정이 매우 힘들지 않았나 싶다. 역시 소통은 개발자끼리만...

 

🍀 크흠 그래도!!!!!!!!!!! 이제 예쁘게 만들기(?)는 잘할 것 같다! 원래는 백엔드 개발자만 하고 싶었는데 풀스택에 대한 여지도 생길 수 있는거 아닌가? 완전 럭키비키잖아?🍀

 

자가 피드백

잘한 점

책임감을 가지고 끝까지 프로젝트를 완수해냈다는 점을 가장 높게 산다. 내가 가고자 하는 방향이랑 너무 달랐기에 늘 시간이 허비된다는 생각이 들었지만, 한번 신청하고 대회를 참가했으면 팀원들을 위해서라도 끝까지 완수해야겠다는 마음 하나로 완주했던 것 같다.

부족했던 점

두 가지가 생각난다.

 

먼저 프로젝트에 대한 열정이 아쉬웠다. 위에서도 언급했다싶이 의지가 생기지 않다보니 디자인 팀에 비해서 개발 팀의 열정이 전반적으로 많이 부족했던 것 같다. 

 

프로젝트의 큰 틀을 바라보면서 다양한 기술적 응용을 수행할 수 있었는데, 기술 구현에 급급한 나머지 기술 스택을 다양하게 활용하지 못했다. 지금 조금만 생각하더라도 회원기능을 만든 뒤, 궁궐에 관련된 광고용 메일 보내기, 궁궐 후기 작성 블로그 등의 기능을 추가해서 기술적 활용도를 더욱 높일 수 있지 않았나... 라는 생각이 든다.

 

향후 계획 및 마무리

이렇쿵 저렇쿵 힘들었지만, 결국 대회에서 🔥'우수상'🔥을 수상했다.ㅋㅋ 상타니까 괜히 서로 돈독해지는 느낌이 있더라.

앞으로 프론트 코드를 제법 분석할 수 있는 능력을 길렀고, 처음 계획했던 대로 딱 체험하는 용도로 적당했던 프로젝트였다.

기회가 된다면 api통신까지 따로 수행해보면 좋지 않을까 싶다. 나중에 혼자 프로젝트 만들때 해봐야지!ㅎㅎ

혼자 기획중인 -singsangssong 전용 블로그 만들기- 에 도움이 될 만한 프로젝트이니 올해 말 ~ 내년 초에 만들 프로젝트에는 매우 도움되지 않을까 싶다. (singsangssong.co.kr 이거로 내 블로그 만들어야지^^)

 

 

참고..ㅋ

끝나고 매일 VS code를 쓰다가 JetBrains를 쓰니까 내 손이 JetBrain에 익었는지 너무 편하더라......

 

GitHub - PalaceSoftware/frontEnd