프론트엔드 개발 과정과 기술 스택을 식당에 비유해보자

비유는 비유일 뿐 오해하진 말자! 재미로 봐주시면 감사하겠습니다.

지난 글또의 멤버중 한 분이 프론트엔드 미니 반상회를 열어주셔서 한번 참여했습니다.

당시 발표 세션들을 들으면서.. 내용이 매우 어렵지만, 발표 중 식당으로 비유하는 내용이 인상 깊었습니다.

어? 한번 프론트엔드 개발 과정과 기술 스택을 식당으로 비유하면 재밌겠다는 생각이 들었습니다.

그리고 프론트엔드 개발을 하다 보면 제 개발 방식과 자주 변화하는 기술 스택에 대해 의문이 생기니까요.

그래서 이번엔 프론트엔드를 거시적으로 식당에 비유 한 번 해보겠습니다. ~~아! 참 좋은 비유네요~~

프론트엔드 개발 과정

제가 예전에 서평으로도 작성했던 더 나은 웹 개발을 위한 가이드의 웹 개발 사이클 순서를 참고하여 살펴보겠습니다.

참고로 마지막 단계인 배포가 식당 운영으로 나올 것 같겠지만,

정보 수집

식당을 열 지역에 대한 정보를 수집합니다.

어떤 정보가 있을지 살펴보면 다음과 같겠네요.

해당 지역에 어떤 사람들이 사는가?
- 몇인 가구가 많은가?
- 소득 수준은 얼마나 되는가?
- 외국인 혹은 한국인 관광객이 많이 오는가?
- 회사들이 많은 지역인가?
해당 지역은 어떤 지리적/기후적 특징을 가지는가?
- 더우면 아이스크림을 서비스로 하나 주거나, 추우면 따뜻한 커피를 서비스로 주면 되겠군요.
해당 지역 인구나 관광객이 불편하다고 느끼는 점은 무엇인가?
- 여기 식당 밥값이 너무 비싸다는 의견이 많다면 싼 밥값을 내세우는 식당을 만들자.
창업하려는 지역에 어떤 식당들이 있는가?
- **음식점에 비유하자면 나는 제육백반 8천원에 100그릇 팔아야 이득이 남는데 저쪽집은 탕! 후! 루! 10개만 팔아도 이득이 남는다는 거임 그러면 누가 제육백반집 하냐? **

등등 살펴봅니다.

웹 개발에서도 잠재적 고객이 될 만한 사람들의 고민을 찾아보면서 정보를 수집하죠.

기획

이제 어떤 음식을 제공할지 선택했으니 이번엔 구체적인 기획을 해봅시다.

참고로 이 글에서는 일단 8,000원짜리 해장국집으로 해봅시다.

예상되는 평균 한 달 비용은 얼마나 될까?
직원은 몇 명이 필요할까?
- 우리가 필요한 직원은 어떤 직원인가?
주방과 홀의 넓이는 어떻게 정할까?
- 홀은 몇 명이 들어갈 수 있게만들까?
- 고객과 직원들이 효율적으로 이동하려면 어떻게 구성할까?
8,000원 중 여러 비용을 제외하고 얼마나 남게 음식을 구성해야 할까?
운영 시간은 24시로 할까? 아침부터 밤까지 12시간만 열까?
식당으로 들어갈 자리에 리모델링 공사를 하면 얼마나 시간이 걸리고 비용은 얼마나 나올까?
어떻게 홍보할까?

등등 따지며 구체적인 계획을 세웁니다.

디자인

기획에서 나아가 이제 식당의 브랜드를 만들어봅시다.

어떤 컨셉의 식당인가?
목표 고객은 어떤 디자인을 선호하는가?
어떤 매체로 디자인할 것인가?
(프랜차이즈일 경우) 본사에서 제공하는 디자인 가이드가 있는가?

이 부분은 디자인 만드는 과정이 더 들 것 같아서 따져볼 것은 이 정도인 것 같아요.

콘텐츠 생성

이번엔 궁극적으로 어떻게 돈을 많이 벌지 고려해봅시다. 단, 돈을 아낀다는 전제는 없는 것으로 보겠습니다.

세트 메뉴를 개발해서 비싸게 팔아볼까?
식당을 어떻게 사람들의 이목을 끌 수 있게 홍보할까?
고객들이 식당 이용에 헷갈리지 않도록 가이드를 제공할까?

개인적으로 디자인과 비슷한 결을 가진다 생각해서 이정도 고려하게 되네요.

개발

이번엔 한번 실제 식당을 차려봅시다.

리모델링 공사
메뉴 개발
기타 필요한 물품 구비(휴지, 수저, 냄비, 물통, 정수기 등등)
홍보하기

물론 고객들을 받기 전 여러 준비를 뜻하는 것입니다.

테스트 및 품질 보증

식당이 다 차려졌다면, 한번 자체적으로 테스트를 합니다.

음식의 맛은 어떤가?
예상되는 고객의 경험은 어떤가?

결론적으로 기획하고 개발하는 사람의 의도대로 만들어졌는가? 이 것에 대해 따져봅니다.

배포 및 운영

이제 모든 준비가 완료되었습니다.

식당을 열어서 고객들을 받아보고, 각종 고객의 피드백을 받아서 식당을 운영하면 됩니다.

프론트엔드 기술 스택

이번엔 기술 스택을 식당에서 제공하는 해장국으로 비유해서 한번 살펴보죠.

html & css => 뚝배기 & 국물

프론트엔드에서 매우 기본이 되는 요소입니다. 뚝배기와 국물이 없으면 해장국이라 볼 수 있을까요??

물론 뚝배기 없이 주는 해장국집도 있을 것이고(reflex), 국물 없이 주는 해장국집도 어딘가 있겠죠..?(no css club)

javascript => 생고기 및 야채들

프론트엔드의 어찌보면 핵심 언어입니다. 하지만 그냥 맘대로 쓰다간 잡내(타입 에러, 콜백 지옥 등)가 심해질 가능성이 높겠네요.. 또한 직접 하나하나 다 다듬고 만드는 데 한 세월이 걸릴 겁니다.

typescript => 국내산 생고기 및 야채들

그나마 타입 추론 덕분에 잡내는 조금 줄어들었지만, 그래도 아직 그대로 쓰기엔 잡내나는 음식이 만들어 질 수 있습니다. 아직도 번거로운건 그대로이구요.

react와 같은 라이브러리 => 라면스프 및 야채 다듬는 기계

이제 라면스프와 아채 다듬는 기계로 얼추 번거로운 단계를 건너뛸 수 있게 됩니다. 또한 혼자서 구현하는 것과 다르게 퀄리티도 더 높을 수 있구요.

next.js와 같은 프레임워크 => 백종원 레시피

처음부터 수많은 개발과 연구 끝에 레시피를 만들어서 맛있는 음식을 제공하면 좋겠지만..

너무 큰 비용과 수고로움이 들기 때문에, 간편하게 백종원 레시피를 이용하면 금방 음식을 만들 수 있습니다.

기타 서드파티 라이브러리 => 반찬(김치 등)과 양념(다데기)

혼자서 위의 야채들로 만들어도 되지만, 시간이 부족하다면 반찬과 양념은 어디서 사갖고 제공해두면 간편합니다.

하지만 예상보다 돈(용량)이 많이 드는 게 단점이겠네요.

마무리

이렇게 해서 프론트엔드(웹)의 개발 과정과 기술 스택을 식당과 음식에 비유하여 살펴봤습니다.

뭔가 글감이 재밌을 것 같아서 써봤는데, 나름 재밌게 쓴 걸로 치면 여태 글 중에 한 손가락 안에 드는 글입니다.

다른 분들도 재밌게 보셨으면 저는 만족합니다.

그리고 위에서도 언급했지만, 비유는 비유일 뿐 너무 분노하며 읽지는 않으셨으면 좋겠습니다.

반박하는 댓글은 언제나 환영입니다!