빵떡 웹 사이트의 문제점

빵떡의 로고

국내 트위치에서 가장 잘 알려진 봇인 나이트봇, 싹둑, 그리고 빵떡.

 

최근 빵떡 봇이 핫한(?) 봇인데, 이 봇의 자체적인 기능보다는 웹 사이트에 문제점에 대해 설명할 것이다. 이건 빵떡뿐만 아니라 웹 사이트를 만들때도 주의할 사항이기도 한 부분이다. 여러분이 웹 사이트를 만들 때 참고해 주면 좋을 것 같다.

1. 리소스를 많이 먹는다.

생각보다 간단해 보이는 사이트인데 리소스를 많이 잡아먹는다.

웹 사이트에서 가장 중요한 것은 바로 리소스를 얼마나 많이 사용되는 것이다. 대부분 웹 사이트는 사진 파일 압축, 불필요한 코드 제거, Minifiy 작업 등으로 최대한 리소스를 안 먹게 작업해 주는 게 일반적인데. 이 사이트는 보기엔 간단한 디자인인데도 리소스는 전혀 그렇지 않다. 말 그대로 리소스를 많이 먹는 돼지다. 리소스만 최적화 해 줘도 웹 사이트의 로딩이 굉장히 빠르고 트래픽 감소에 굉장히 도움된다.

2. 웹 사이트의 최적화가 안 되어 있다.

구글 폰트에서 가져오는 코드이다. 근데 이걸 굳이 4줄로 나누어야 되는가?

head 태그에 리퀘스트를 많이 불러오는 것이 있다. 위 사진을 인용해 보면 구글 폰트에서 가져오는 코드가 있는데, 이걸 폰트 패밀리에 맞게 각각 4줄로 나누었다. 이건 리퀘스트를 4번 불러오게 만들어서 웹 사이트의 로딩을 느리게 만든다. 게다가 안 쓰이는 글꼴도 있으니 말 다했다. 굳이 폰트를 리퀘스트 4번 불러올 바에 1번 불러와서 여러 개의 폰트를 로딩시키는 것이 더 좋을 것 같다.

3. 인라인 스타일을 남용.

클래스를 써도 될 것을 굳이 인라인 스타일로 만들었다.

aside 태그를 잘 보면 인라인 스타일 코드가 보인다. 인라인 스타일은 대부분 자바스크립트로 CSS 스타일링할 때 쓰이는 것으로 아는데, 이거는 클래스로 해도 될 것을 굳이 인라인 스타일로 만들었다. 내가 보기엔 이건 Copy & Paste 코딩이라는 것이다. 이렇게 만들면 CSS 작업할 때 매우 불편할 것이며, 그 또한 웹 사이트의 로딩을 느리게 만든다.

4. 가독성 떨어지는 색과 글꼴.

푸터를 잘 보면 읽기가 힘든 글꼴과 색이 되어 있다.

해당 글씨체는 Single Day 라는 글꼴인데, 이건 애초에 본문용으로 제작된 글꼴이 아니기 때문에 본문용으로 쓰면 읽기가 힘들다. 더구나 푸터 부분 보면 링크의 색깔과 배경색 때문에 가독성이 매우 떨어진다. 글꼴은 나눔 고딕에 배경색을 그대로 놔두고 글씨는 검은색으로 했다면 괜찮았을 것 같다.

5. 형편없는 인터페이스와 디자인.

모바일 환경에서 넘어가는 글씨. 고칠 생각이 없는 것 같다.

애초에 이건 다른 사이트에서 무료로 배포한 템플릿으로 가져온 웹 사이트다. 기존 템플릿이 잘 만들었으면 상관 없는데 그 잘 만든 디자인을 활용할 줄을 모른다는 것이다. 말 그대로 돼지 목에 진주 목걸이를 건 느낌이지 않을까 생각된다. UI의 디자인도 일관성이 없고 제멋대로이다.

 

또 다른 문제점은 모바일 환경에서는 화면이 넘어가는 문제점이 있다. 그리 심각한 것은 아닌데, 빵떡 봇이 출시된 지 3년 정도 되었다. 그 정도면 고칠 줄 알아야 되는 게 아닌가 싶다. Maintaining 라는게 있지 않는가.

 

숫자만 입력되게 할 수 있는데도 굳이 input 태그에 text로 해 두었다.

결론은 빵떡은 봇 자체적으론 괜찮아 보여도 웹 사이트의 구조 때문에 마이너스가 된 것이 아닐까 생각된다. 1인 개발자가 만든 것은 대부분 완성도가 낮을 수 밖에 없는 건 사실이다. 그래도 개발을 했다면, 그걸 고치는 마인드를 가지는 것이 좋은 개발자가 아닐까 생각된다.