외주 맡긴 홈페이지, 잘 만든건가요?

많은 분들이 홈페이지를 외주로 만들고 엉망진창의 홈페이지를 받기도 합니다. 하지만 전문가가 아니다보니 이게 잘 만든건지 못 만든건지 구분하기 어려우실 겁니다. 이번 글에선 개발에 대해 지식이 많지 않아도 쉽게 테스트해보실 수 있는 방법들을 소개합니다.

1. 여러 브라우저에서 작동시켜보기

여러분이 홈페이지 외주를 맡기셨다면 가장 먼저 해볼 사항은 여러 브라우저에서 켜보는 겁니다.

보통은 크롬, 파이어폭스 등으로 작동했을 땐 문제가 생기지 않지만 오래된 브라우저에서 작동이 이뤄지지 않는 경우가 발생할 수 있습니다. 인터넷 익스플로러가 대표적입니다. 아래의 브라우저를 여러분의 컴퓨터에 설치해서 한 번씩 작동시켜보세요. 만약 작동이 이상하다면 브라우저 호환성 문제가 있다는 겁니다.

크롬 브라우저

파이어폭스

인터넷 익스플로러

엣지 브라우저

2. 모바일에서 작동시켜보기

모바일도 다양한 브라우저가 존재합니다. 여러분이 특히 관심을 가져야 하는 부분은 많은 사람들이 사용하는 삼성 인터넷 브라우저, 카카오톡 웹뷰 등입니다. 여러분의 웹사이트를 안드로이드와 아이폰으로 들어가보세요. 또한 카카오톡으로 들어가보시고, 인스타그램, 페이스북 등을 통해 들어가보세요. 특히 카카오톡을 통해 들어갔을 때는 모양이 많이 달라질 수 있습니다.

3. 성적표 출력하기

위의 두가지 테스트를 모두 통과했나요? 축하드립니다. 절반은 성공입니다. 이제 제대로된 평가를 시작해봅시다. 웹사이트도 점수로 평가할 수 있다는걸 아시나요? 모든 웹사이트는 간단하게 좋은 웹사이트인지 아닌지를 알 수 있습니다.

먼저 크롬 브라우저를 켜서 여러분의 홈페이지에 방문해봅시다. (예시는 다음에서 진행했습니다.)

윈도우즈에서는 키보드 F12를 누르면 아래와 같은 창이 생깁니다.(맥에서는 alt + cmd + i)

빨간 박스 부분을 클릭해서 Audits을 클릭해주세요. (참고로 Audit은 품질 검사라고 이해하시면 됩니다.)

위와 같은 화면이 나타났다면 이제 성적표를 출력해봅시다. Run audits를 눌러주세요. 몇몇의 사이트에선 에러가 뜨면서 안될 수도 있습니다. 이 경우엔 Clear storage의 체크를 해제하고 진행해주세요.

짠! 위의 이미지는 다음의 모바일 웹사이트 성적표입니다. 딱 봐도 점수가 낮습니다.(네이버랑 비교해보면 다음이 잘 못만들었네요.) 각 항목을 읽어보시면 전문적인 지식이 없더라도 대충 이해하실 수 있을 겁니다. 하지만 외주업체에게 따지기 위해 몇가지 핵심적인 키워드를 알아봅시다.

Performance

웹 사이트의 성능입니다. 점수가 낮을 순 있지만 특정한 지표가 비정상적으로 나쁜 경우 외주업체에게 수정을 요구하시면 됩니다. 이를테면 First Meaningful Paint가 10s 이상으로 나타나는 경우입니다. 의미있는 페이지가 출력되는데까지 10초 가까이 걸릴 수 있다는건 심각한 문제겠죠?

SEO

검색엔진최적화입니다. SEO 점수가 높은 사이트는 구글, 네이버, 다음 등에서 검색될 가능성이 높습니다. SEO 점수를 올리는 방법은 몇가지 있는데 Header에 Keywords 메타 태그를 추가해서 설정해주는 방법도 있고, 각각의 페이지 구성이 검색에 유리하게 디자인되어있는지도 중요합니다. 이 부분은 깊게 들어가면 웹 구조나 시멘틱 디자인 등과도 연결되니 관심이 있으시면 자세히 알아보시는걸 추천드립니다.

Opportunities

이 항목은 비교적 빠르게 개선할 수 있는 항목을 표시해줍니다. 이미지를 더 빠르게 로드하는 방법, 텍스트를 압축해서 전송하는 것 등을 추천해줍니다. 검사 후 여기 나온 항목에 대해 외주업체에 요청하시면 비교적 빠르게 성능향상이 이뤄지는 것을 확인하실 수 있을겁니다.

Audits은 여러가지 환경을 종합적으로 검사합니다. 오프라인 상태에서 어떻게 표시되는지, 프로그래시브 앱을 지원하는지, 모바일 호환이 가능한지, 이미지 로드 시간은 어떠한지 등 모든 지표를 종합 판단해줍니다. 또한 여러가지 옵션을 설정하고 테스트할 수 있습니다. 데스크탑과 모바일을 각각 테스트해볼 수 있고, 컴퓨팅 성능의 차이를 줄 수도 있습니다. 여러 환경에서 테스트를 해보고 점수가 비정상적으로 낮다면 외주업체에게 해당 부분에 대해 수정 요구를 하시길 권장드립니다.

4. 보안 테스트

마지막 심판대입니다. 제 생각에 보안 이슈를 피해갈 수 있는 홈페이지는 거의 없습니다. 아마 평가해보면 대부분 C+이상을 맡기 어려울 겁니다. 하지만 치명적인 문제가 있을 수도 있으니 반드시 테스트해보시길 바랍니다.

https://www.immuniweb.com/free/

[ImmuniWeb® Free Security Test

ImmuniWeb® Free Products: Mobile App Security Test, Phishing Test, SSL Security Test, Website Security Test.

https://www.immuniweb.com/free/](https://www.immuniweb.com/free/) 

이 사이트는 무료로 보안 테스트를 진행할 수 있습니다. 위의 링크로 들어가셔서 검사할 사이트를 입력해주세요. 회원가입의 절차가 필요할텐데 오래걸리진 않습니다.

F는 면하세요 ㅠㅠ

검사 결과를 받아보시면 마치 병원에서 "6개월 남았습니다." 하는 것처럼 참담한 기분이 들 수 있습니다. 그리고 외주를 맡긴 업체에게 화가 날 수도 있을겁니다. 당연한 일이지만 너무 심각하게 생각하시진 마시고, 기본적인 해킹 방어만이라도 제대로 했다면 괜찮습니다.

4.1 사용자 정보 암호화

사용자의 정보를 저장한다면 어떻게 저장하는지, 전송될 때 보안은 어떻게 되는지 확인해보세요. 대부분 해시를 사용하겠지만 salt 생성이나 POST 전송 과정에서 암호화가 이뤄졌는지 체크해보시면 좋습니다.

4.2 SQL 인젝션 방어

아주 기본적인 인젝션 공격도 방어하지 못하는 웹사이트가 많습니다. 이 점에 대해서 외주 업체가 어떻게 관리했는지 물어보세요.

4.3 쿠키, 로컬 스토리지

사용자의 정보를 쿠키나 로컬 스토리지 등에 저장하는 경우가 있습니다. 이런 식으로 사용자 정보를 저장하는 것은 보안에 큰 위험요소일 뿐 아니라 매우 나쁜 홈페이지입니다. 쿠키나 로컬 스토리지에 저장하는 데이터가 무엇인지와 사용자 정보를 저장하는지 반드시 체크해보세요.

4.4 XSS 방어

플렛폼이나 사용자가 쓴 글 등이 공개적으로 나타날 수 있는 게시판 등에선 XSS 방어가 필수적입니다. 쿠키나 로컬 스토리지에 사용자 정보를 담고 있는 상태에서 XSS공격이 이뤄진다면 사용자의 정보가 유출되는건 시간문제입니다.

이정도만 살펴보셔도 외주한 홈페이지가 제대로 만든건지 아닌지 쉽게 아실 수 있습니다. 이제 비싼 돈들여 홈페이지 만들고, 피해당하지 마세요.