시작은 반이랬어요, 예스피씨 개발 이야기

지난 코드 포 코리아 컨퍼런스가 끝나고, 지난 2017년 세월호, 2018년 백석 온수관 파열 사건 등에 꾸준히 관심을 갖고 때로는 관련 해결책을 개발과 함께 조합하여 고민하기도 했던 점들이 '시빅 해킹'으로 불리기도 한다는 점을 처음 알게 되었습니다. 2018년 이후로는 특별히 사회 문제에 민첩하게 행동하는 개발자로 살지는 못했는데, 올해 하반기에는 SPC 불매 운동 바람이 불면서 간만에 사회 문제와 밀접한 프로젝트를 시작하게 되었습니다. 이 글은 그렇게 내놓은 예스피씨와 그 주변의 이야기를 해보고자 합니다.

처음부터 하려고 했던 것은 아니었어요

사실, 전에도 남양유없 아이디어를 차용한 사이트를 제작하겠다는 분이 계시기는 했습니다. 그래서 한동안 굳이 만들지 않고 기다리고자 마음을 굳게 먹고 있었는데, 2주가 넘도록 도메인 구입과 저장소 개설 외의 소식이 없어서 결국 조만간 직접 해봐야겠다고 생각을 바꾸게 됩니다. 24일 저녁 9시에 헬스장에서 누군가 남양유없 같은 거 만들어주면 좋겠다는 트윗을 보고 결심이 서서 기획과 정보 수집을 시작, 당시 개인 포트폴리오 웹사이트 겸 Firestore 연습 시에 사용하던 SvelteKit을 사용해 개발과 테스트를 반복히고 트친 분들께 명칭까지 공모받은 끝에 다음날 저녁 9시에 공개하게 되었습니다.

사실 그때는 어차피 남의 아이디어였기 때문에,

• 실력이 부족한 사람일지라도 아이디어와 구현 난이도 등에 따라 적절한 최소 기능 웹 서비스를 24시간 안에 구현할 수는 있구나
• 그동안 계속 학습하고 써보고 있지만 완성한 것은 없었던 SvelteKit으로 무언가 완성할 역량은 되는구나

하는 부분에서만 만족하면 그만이었고 실제로 달성하였으니 충분히 만족스러웠습니다. 어차피 SPC 삼립 빵은 대부분 SPC 로고가 포장지에 인쇄되어 있어서, 한 번 찍어보고 싶은 게 아니면 굳이 해볼 필요가 없기도 했고요. 그래서 추가 업데이트를 할 생각조차 하지 않았습니다. 다만 고등학교 때 SPC의 계열사인 줄 알았는데 아니었던 빵 제조 회사에 속은 기억이 생각 나 공개할 때 유용한 핑계로 쓰기로 했습니다. 실제로 속았으니까요!

그래도 언론에서 연락까지 올 거라고는 생각 못 했습니다

팔로워도 몇 없는 계정에 RT가 무수히 올라가는 모습을 보며 기쁘면서도 살짝 겁을 내며 잠이 들었는데, 다음 날 아침에 오류 제보용 Google 설문지로 연락이 왔습니다. 당시 처음으로 예스피씨를 소개해주신 한겨례 기사를 작성하신 분이었는데, 겁 많은 저는 이때 서면 질의응답만을 받기로 내부적으로 방침을 정하고 최대한 인터뷰를 거절했습니다. 너무 초기라서 관심이 집중되는지라 부담스럽기도 했고, 혹시라도 SPC 그룹에서 법률적으로 대응하기라도 하면 어떻게 될까 걱정스러워 나서질 못했어요. 지금 생각해보면 적당한 선에서 답변드릴 수 있는 부분은 드릴 것을 그랬나 싶습니다. 그래도 기사화 예정임을 친절하게 알려주셨던 유일한 기자셨던 이우연 기자님께 이 자리를 빌려 감사의 인사를 드립니다.

그 밖에도 경기신문, 머니투데이, 조선일보 등에서 사전 통보 없이 언급되기도 했고 KBS에서 연락이 오기도 하였는데, 이때도 여전히 고민이 많았고 연락이 오가는 과정에서 추이를 지켜보니 그리 좋지 못해 인터뷰 대상이 되지 못할 것 같아 최종적으로는 거절했습니다. 대신 방송에는 깜:빵집 개발자 분의 인터뷰와 시연이 포함된 것으로 알고 있는데, 오랜 설득에도 도움이 되어드리지 못해 아쉬울 따름입니다.

다른 서비스가 나왔다는 걸 알게 되었어요

제가 서비스를 공개하고 거의 딱 12시간 뒤에, 깜:빵집이 공개되었다는 사실을 알았습니다. 실제로 언론에는 예스피씨보다 깜:빵집이 더 잘 알려져 있을 거에요. 개발 시작도 깜:빵집이 먼저 했습니다. 공개는 트위터에서의 공개만 보면 제가 더 빨랐지만, 실제 개발자가 최초에 무엇으로 홍보했는지는 확실하지 않아 비슷한 시기일 것으로 예상하고 있습니다. 깜:빵집 홍보 게시글 확실한 사실은 저도 그 분도 상호 간에 이런 서비스가 개발되고 있다는 사실을 몰랐다는 거에요.

그래서 둘러보던 차에 제가 처음에 정보를 수집할 때 알고 있었던 바코드 대역의 일부만 깜:빵집에서 인식하고 있다는 사실을 알게 되었습니다. 여기서 잠깐 설명을 하자면 파리바게뜨 등지에서 사용하는 독자 바코드가 아닌 바코드의 경우 GS1에서 개발한 EAN-13 혹은 EAN-8 규격으로서 13자리 기준으로 한국 국가코드 880 뒤에 제조사 번호(4자리로 알고 있습니다), 제품 번호, 검증 번호(한 자리)로 구성되어 있습니다. 이때 최근 SPC 삼립이 편의점, 마트 등에 활발하게 납품하는 상품들은 대부분 제조사 번호 1068을 가리키는데 이 데이터만 깜:빵집에 수록이 되어 있는 것입니다.

예스피씨의 경우에는 처음 개발 당시인 월요일에서 화요일로 넘어가는 새벽 사이에 정보를 수집하고 만드는 과정에서 제조사 고유 번호를 검색할 수 있는 페이지가 있다는 것을 알게 되어 잘 알려진 8801068 대역을 제외하고 해외에서 검색 가능한 제조사인 비알코리아(주)나 파리크라상(주), 그리고 아마도 예전에 사용했던 것으로 추정되는 삼립(주) 바코드 대역을 추가해두었기 때문에 삼립 이외의 회사 주체로 유통하는 제품도 콜라보 상품^[각주:1]을 제외하고는 확인이 가능했었습니다. 만약 또 다른 불매운동으로 이러한 프로젝트를 시작하시려는 분이 계신다면 이용해보셔도 좋을 것 같아요. 다만, 해당 사이트는 바코드 규격을 제작한 GS1의 해외 사이트여서 2005년 이전에 발급된 바코드는 검색되지 않을 수도 있어요.

깜:빵집이 본격적으로 언론 활동을 하기 전에도 트위터에서 좀 더 큰 유명세를 타고 있었던 깜:빵집이 조금 부럽기도 했지만, 그보다는 비슷한 시기 출시된 동일 목적의, 그것도 돈을 목적으로 하지 않는 서비스가 서로 경쟁하고 이기적인 모습을 보여주는 것은 부적절하다는 판단 하에 해당 대역을 제품 판별에 이용해달라는 이슈를 작성하기로 했습니다. 이제와서 이슈 트래커에 작성한 내용을 다시 보니 한겨례 기사만 읽어보면 깜:빵집에서도 해당 대역이 인식되는 것처럼 판단할 수 있는 문제도 결정에 한 몫 했던 것 같네요. 다행히 빠르게 확인하시고 응답주셔서 깜:빵집에서도 해당 대역에 대한 원활한 확인이 가능하게 되었습니다.

allow.json에 삼립, 파리크라상, 비알코리아 바코드 대역 추가 · Issue #4 · saengwon-kim/isspc

한편, 솔직하게 쓰자면 씁쓸한 부분도 없지는 않았는데요. 대학에 홍보를 하지는 않았지만 저장소에 학교 이름이 공개되어 있는 만큼 만약 관련해서 학보사 내에 이 주제로 기사를 쓰시는 분이 있다면 언급을 해주시지 않을까 하는 기대가 살짝 있었습니다. 실제로 기사가 나오기는 했습니다만, 아쉽게도 인터넷 검색으로 누리꾼 의견을 모은 정도에 깜:빵집만 소개가 나가서 홍보의 중요성(?)을 느끼기도 했습니다. 이때 즈음 정말 많이 고민했던 것 같아요. 어차피 깜:빵집이 유명하다면, 나도 기여자 중 한 사람으로 남아 한 쪽에 몰아주는 것이 서비스 품질 측면에서 낫지 않을까? 서비스를 계속 유지하기보다 깜:빵집을 이용하라고 옮겨주는 것이 사람들도 혼란이 덜하지 않을까? 깜:빵집의 존재를 알게 된 이후부터 조금씩 생각났던 부분들이 학교 기사를 계기로 본격적으로 진지하게 고민할 부분이 된 거죠.

하지만 계속 개발하기로 했습니다.

처음엔 그래도 서비스가 중지되었을 때 대체제 하나는 남아있는 것이 좋겠다 했지만 SPC가 상표를 진짜 잘 안 보여주는 시장은 편의점이나 마트 공장 빵이 아닌 만큼, 남양유없만큼 사용할 동기가 되는 서비스는 아니어서 대체제로서의 의미는 거의 없을 것 같았습니다.^[각주:2] 아마 실제로도 그럴 거에요. 그런데 한편으로는 저 개인에게 부과했던 목표들을 달성한 결과 세상에 나온 이 서비스에 애정이 있기도 해서, 좀 아까웠습니다.

그래서 처음부터 깜:빵집과는 프레임워크, 라이브러리, UI, 제작자 등이 달랐지만, 이 참에 조금 다른 방향으로 나가기로 했습니다. 현재의 깜:빵집과 달리 당시 깜:빵집은 확인 결과 초기 버전임에도 많은 기능을 제공하기 위해 성능 면에서 아쉬운 부분이 있어서 저사양 기기에서 잘 작동할지 의문이 있었기에 관련하여 방향성을 잡기로 했습니다.

• 저사양 기기에서도 잘 작동하도록 최소한의 기능, 최소한의 애니메이션만 사용할 것
• 핵심 외에 부가 서비스로서 추가하고자 하는 기능은 별도의 프로젝트나 사이트로 분리해서 구현할 것
• 접근성에 보다 신경써서 더 많은 사람이 사용할 수 있도록 할 것
• Safari, Firefox 등 Chromium 계열이 아닌 브라우저에서의 동작도 꼼꼼하게 확인할 것

그래서 깜:빵집과 달리 SPC의 브랜드를 소개하는 페이지는 공식 링크로 대체하도록 하고, 일부 기기를 제외한 대부분의 기기가 한 페이지 안에 스크롤 없이 모든 콘텐츠가 들어올 수 있도록 최소한의 구성을 유지하기로 했습니다. 이는 현재도 유지하고 있는 부분으로, 앞으로 페이지에 요소가 추가되더라도 기존 기능 사용에 문제가 없도록 최대한 조정할 예정입니다.

그리고 한 가지 더, 예스피씨는 깜:빵집과 달리 빠리바게뜨의 독자 바코드에 대해서는 최종적으로 대응하지 않기로 했습니다. 이는 기술적으로 대응 불가하기 때문이 아니라, 독자 바코드 규격인 만큼 다른 회사의 바코드를 읽었는데 삼립 제품으로 나올 수 있기 때문입니다. 비슷한 피해 사례로 제조사는 남양유업 외 몇 곳이 있는데 유통 업체는 한 곳이라 다른 제조업체에서 제조했지만 단지 제조사 중 한 곳이 남양유업이라는 이유로 남양유없에 남양 제품으로 뜨는 사례가 있습니다. 이러한 문제로 몇몇 커뮤니티에서 남양과 큰 관계가 없는 제조사 또한 남양 계열사로 오해받는 사례를 보았고, 예스피씨는 최대한 그러지 않기로 했습니다. 향후 SPC삼립에 대해서도 이런 문제가 발생하게 되면 반드시 해당 제품에 대해서는 확인 문구를 삽입하고, API에도 관련 규격을 추가할 예정입니다.

JSON을 이용한 데이터 관리로의 전환

본래 처음 발표했을 때는 제품명을 인식하지 않고, 바코드 대역만 JS파일에 하드코딩하여 검사하는 형식이었습니다. 그런데 somnisomni님께서 JSON 파일에서 불러오는 방식으로 변경하는 풀 리퀘스트를 작성해주셨고, 이에 본격적으로 각종 데이터를 JSON 기반으로 교체하기로 했습니다. 해당 풀 리퀘스트 덕분에 저도 JSON에 대한 이해도가 높아졌고, 본격적으로 제품 데이터를 수집하여 단순 대역이 아닌 제품까지 인식할 수 있는 제품으로 개편할 수 있는 발판이 되었습니다. 다시 한 번 기여에 감사드립니다.

API 형식으로 구현 방식 전환, 공개, 그리고 앞으로는

이 글을 쓰는 2023년 3월에, 드디어 미루고 미루다 바코드 대역을 검사하는 부분을 SvelteKit에서 제공하는 API Endpoint 방식으로 변환했습니다. 지금까지는 파일만 +server.js 였지 실제로는 단순히 외부 JavaScript 파일에서 함수를 불러오는 것 뿐이었거든요. 처음 시도했던 2022년 말에는 SvelteKit의 API Endpoint에 대한 이해도가 낮아서 실패하였었는데, 그 사이에 SvelteKit의 문서도 보강되기도 하였고 저도 다른 프로젝트에서의 연습을 통해 공부하면서 드디어 API로 불러오는 형식을 가지게 되었습니다. 사용하실 일은 거의 없으실 듯하지만, 혹시나 하는 마음에 API 문서도 같이 작성하여 내부적인 문서화 겸 공개도 같이 진행하게 되었고요.

앞으로도 제 개인 프로젝트 중에서 예스피씨는 배우고 활용했던 것을 적용해보는 서비스로 남을 예정입니다. 물론 현재 제공하고 있는 기능의 부족한 점에 대해서도 어떻게 수정하면 좋을지 고민하고 있습니다. 그 밖의 추가 서비스도 기획하고 있는데, 실제로 실현하게 될지, 아니면 그저 완성하지 못하고 만든 기획 중 하나로 남을지 모르겠습니다. 그래서 오늘도 시작이 반이라는 걸 다시금 깨닫고 있습니다.

1. 예시: 삼립 핫팩 [본문으로]
2. 다만, 샌드위치, 햄버거, 콜라보 빵 등은 비교적 찾기 어렵기도 합니다. [본문으로]