웹 개발자의 10가지 흔한 실수

마치 모던 웹을 개발하기 위한 무한한 선택지들이 있는 것 같습니다. 웹 개발자들은 웹 호스팅 플랫폼과 근본적인 데이터 저장장치, HTML, CSS, Javascript를 작성할 도구, 어떻게 디자인을 구현할 것인지, 그리고 어떤 JavaScript 라이브러리/프레임워크를 사용할 것인지를 결정해야 합니다.

일단 한번 결정을 하고나면, 온라인 세계는 더 나은 웹 경험을 위한 팁을 제공하는 아티클, 포럼, 예제로 꽉 찹니다. 어떤 선택을 하는지와 관계 없이, 모든 개발자는 실수를 하기마련입니다. 몇몇 실수들은 특정한 접근과 연관되어있으나, 모든 웹 개발자들에게 공통적인 몇몇 사항들도 있습니다.

그런 이유로 연구, 경험, 그리고 최근의 관찰을 통해 얻은 웹 개발자들이 저지르는 10가지 흔한 실수들과 그 해결법을 공유하기로 했습니다.

다음 목록은 특별한 순서가 있는 것은 아닙니다.

1. 구식 HTML 작성

실수: 초창기의 인터넷은 오늘날보다 훨씬 적은 마크업 옵션을 제공했습니다. 그러나, 세 살 버릇이 여든까지 간다고, 많은 사람들은 아직도 지금이 20세기인 마냥 HTML을 작성합니다. 예로, <table>로 레이아웃을 짠다든가, 다른 의미가 명확한 태그가 더 적절한 상황에서 <span> 혹은 <div> 를 사용한다든가, <center> 나 <font>같은 현재 HTML 표준에서 지원되지 않는 태그를 사용한다든가,  페이지에서 &nbsp; 엔티티를 많이 이용하여 아이템을 스페이싱하는 것들을 들 수 있습니다.

영향: 이전 세대의 HTML을 작성하는 것은 여러 브라우저에서 서로 다르게 작동하는 지나치게 복잡한 마크업을 초래할 수 있습니다. 그리고 이것은 Microsoft Edge와 같은 더 최근의 모던 브라우저와 심지어 Internet Explorer의 이전 버전 (11, 10, 9)에서도 불필요합니다.

회피하기: <table> 요소로 콘텐츠 레이아웃을 짜는 것을 그만두고,  표로 정리된 데이터를 나타내기 위해 이 코드를 사용하는 것을 제한하십시오. whatwg.org에서 볼 수 있는 것과 같은, 현재 이용가능한 마크업을 숙지하십시오. HTML을 콘텐츠가 어떻게 표시될지가 아닌, 콘텐츠가 어떤 것인지를 묘사하기 위해 사용하십시오. 콘텐츠를 정확히 표시하기 위해서는, CSS를 사용하십시오.

2. "제 브라우저에서는 작동하는 데요..."

실수: 개발자들은 특정한 브라우저를 좋아하거나, 특정한 브라우저를 정말로 경멸할 수 도 있으며, 그런 관점에서 웹 페이지들을 우선적으로 테스트할지도 모릅니다. 또한 온라인에서 찾을 수 있는 예제 코드들이 다른 브라우저에서 어떻게 보여질지 고려하지 않았을 수도 있습니다. 또한, 몇몇 브라우저들은 스타일에 대해 다른 기본 값을 가지고 있습니다.

영향: 브라우저 중심 사이트를 작성하는 것은 다른 브라우저에서 매우 나쁜 질을 초래할 것입니다.

회피하기: 개발 중 모든 브라우저와 버전에서 웹페이지를 테스트 하는 것은 현실적이지 않을 것입니다. 그러나, 여러 브라우저에서 사이트가 어떻게 보일지를 정기적으로 확인하는 것은 좋은 접근입니다. 오늘날, free VMs나, site scanners같은 플랫폼 독립적인 무료 툴들이 사용가능합니다. Browsershots나 BrowserStack같은 사이트들은 다양한 브라우저/버전/플랫폼에서 어떻게 주어진 페이지가 보일 것인지, 스냅샷을 보여줍니다. Visual Studio같은 툴은 또한 작업 중인 단일 페이지를 여러 브라우저에서 표시하도록 브라우저를 호출할 수 있습니다. CSS로 디자인할 때,  모든 기본값을 meyerweb.com에 나온 값으로 "리셋하는 것"을 고려하십시오.

사이트가 어떤 브라우저를 위해 특별히 만들어진 CSS 기능을 하나라도 사용하고 있다면, -webkit-, -moz-, 또는 -ms-같은 벤더 프리픽스에 유의하십시오. 이에 관한 산업 트렌드는 다음 참조들에서 살펴볼 수 있습니다.

• Microsoft Edge Dev Blog: A break from the past, part 2: Saying goodbye to ActiveX, VBScript, attachEvent… (과거에서 벗어나기, 파트 2: ActiveX, VBScipt, attachEvent에게 작별인사를...)
• QuirksMode.org: CSS vendor prefixes considered harmful (CSS 벤더 프리픽스는 해롭습니다.)
• Bruce Lawson: On Internet Explorer supporting -webkit vendor prefixes (-webkit- 벤더 프리픽스를 지원하는 인터넷 익스플로러에서)

위 참조들이 밴더 프리픽스를 멀리하는 것과 그 이유를 설명하는 반면에, 이 사이트는 오늘날 벤더 프리픽스를 어떻게 할 것인지에 대한 현실적인 제안을 제공합니다.

 

Advertisement

3. 나쁜 폼

실수: (특히 텍스트 필드에 입력할 때) 사용자가 어떠한 정보든간에 제공하게 하는 것과 그 데이터가 의도한대로 받아질 것이라고 가정하는 것.

영향: 사용자 입력을 신뢰할 때 많은 것들이 잘못될  수 있고, 잘못될 것입니다. 필요한 데이터가 제공되지 않거나, 받은 데이터가 근본적인 데이터 스키마와 호환되지 않는다면 페이지는 실패할지도 모릅니다. 훨씬 더 심각한 것은 인젝션 공격 (OWASP: Top 10 2013-A1-Injections를 보십시오) 같은 것을 통한, 사이트의 데이터 베이스에 대한 의도적인 침해입니다.

회피하기: 첫 번째 짧은 조언은 자신이 어떠한 데이터를 기대하는 지를 사용자에게 명확히하라는 것입니다. 오늘날, 주소라고 한다면, 그것은 직장, 집, 심지어 이메일 주소도 될 수 있습니다! 명확히 하는 것에 더해서, 이 문서에서 보여준 것과 같이 오늘날의 HTML에서 사용가능한 데이터 검증 기법을 사용하십시오. 데이터가 브라우저 측에서 어떻게 검증되는 지에 상관 없이, 서버 측에서도 항상 데이터가 검증되도록 하십시오. 각 필드가 올바른 데이터 타입이라는 것을 확인하지 않고서는 절대로 사용자 입력에서 데이터를 이용하기 위해 연결된 T-SQL 구문을 허용하지 마십시오.

4. 비대한 응답

실수: 페이지는 많은 고품질 그래픽과 사진들로 채워져있습니다. 그 중 사진은 <img> 요소의 height과 width 속성으로 축소됩니다. CSS와 JavaScript같은 페이지에서 링크된 파일들은 거대합니다. HTML 마크업 소스 역시 불필요하게 복잡하고 대규모일 수 있습니다.

영향: 페이지를 완전하게 보여주는 데 걸리는 시간이 몇몇 사용자들이 포기하거나, 혹은 참지 못하고 전체 페이지를 다시 요청할 정도로 길어지게 됩니다. 몇몇 경우, 페이지 처리가 너무 오래걸리면 에러가 발생할 것입니다.

회피하기: 인터넷에 접속하는 것은 점점 빨라지고 있으니, 비대해도 상관없다고 생각하지 마십시오. 대신에, 브라우저에서 사이트로 들어가고 나오는 모든 것을 비용으로 여기십시오. 이미지들은 비대한 페이지의 주요 원인입니다. 페이지 로드를 늦추는 이미지의 비용을 최소화하기 위해서, 다음 세가지 팁을 따르십시오.

1. 자신에게 "모든 그래픽들이 절대적으로 필요한가?"라고 물으십시오. 그렇지 않다면, 불필요한 이미지를 제거하십시오. 어떤 이미지를 압축할 지 알기 위해 여기서 사이트를 스캔할 수 있습니다.
2. Shrink O'Matic이나 RIOT같은 도구를 이용해 이미지 크기를 최소화하십시오.
3. 이미지를 미리 로드하십시오. 이것은 초기 다운로드시에는 비용을 개선하지 못할 것이나, 같은 이미지를 사용하는, 사이트의 다른 페이지를 훨씬 빨리 로드할 수 있도록 합니다. 이 팁에 대해서는, 이 아티클을 보세요.

비용을 줄이기 위한 또다른 방법은 연결된 CSS와 JavaScript 파일을 최소화 하는 것입니다. 이를 돕기위한 수 많은 툴들이 있는 데, 예로 Minify CSS와 Minify JS가 있습니다.

이 주제를 끝내기 전에, 배포된 HTML을 분류하고 (실수 #1을 보십시오) <style>이나 <script>태그를 HTML에서 사용할 때 좋은 판단을 내리십시오.

5. 작동할 것인 코드 생성

실수: 서버에서 실행되는 것이 JavaScript든지 코드든지, 개발자는 그것을 테스트하고 확인했으며, 그에 따라 배치된 후에도 여전히 작동할 것이라고 결론지었습니다. 코드 실행은 예외 처리 없이 실행되었습니다. 이는 개발자가 테스트할 때 코드가 작동했기 때문입니다.

영향: 적절한 에러 확인이 없는 사이트는 엔드 유저에게 끔찍한 방법으로 에러를 드러낼지도 모릅니다. 사용자 경험이 극적으로 영향받을 수 있을 뿐만 아니라, 에러 메세지의 내용이 해커에게 힌트를 제공할 수도 있습니다.

회피하기: 실수하는 것은 인간이니, 그 철학을 코딩에도 가져오십시오. JavaScript를 사용할 때, 에러를 잡는 것은 물론 에러를 예방하는 좋은 기법을 구현하십시오. 이 아티클이 Windows Apps을 위한 JavaScript 코딩을 말하고 있긴해도, 대부분의 주제는 웹 개발에도 적용될 수 있으며, 좋은 팁들로 가득차있습니다! 미래의 변화에 잘 대처할 수 있는 견고한 코드를 작성하는 또다른 방법은 단위 테스트입니다.

서버 측 코드의 실패는 사용자에게 어떠한 샌님같은 세부사항도 보여주지 않고 잡아내야 합니다. 필요한 것만 드러내고, HTTP 404와 같은 친근한 에러 페이지를 구축하십시오.

6. 갈라지는(forking) 코드를 작성하는 것

실수: 모든 브라우저와 버전을 지원하겠다는 숭고한 생각으로, 개발자는 각 가능한 시나리오에 대응하는 코드를 생성합니다. 코드는 모든 종류의 지시로 갈라지는 if문의 무더기가 됩니다.

영향: 새로운 버전의 브라우저가 업데이트됨에 따라, 코드 파일은 비대해지고 관리하기 어려워집니다. 그리고 #1에서 언급한 바와 같이, 이것은 점점 더 불필요해집니다. 

회피하기: 코드에서 기능 감지를 구현하는 것 vs. 브라우저/버전 감지. 기능 감지 기법은 극적으로 코드의 양을 줄여주고, 읽고 관리하기 훨씬 더 쉽습니다. 기능 감지 뿐만 아니라 HTML5나 CSS3를 지원하지 않는 오래된 브라우저를 위한 대비책 제공을 자동적으로 도와주는 Modernizr와 같은 라이브러리를 이용하는 것을 고려하십시오.

7. 반응하지 않는 디자인

실수: 사이트 개발이 개발자/디자이너와 같은 크기의 모니터에서 보여질 것을 가정합니다.

영향: 모바일 기기나 초대형 화면에서 사이트를 볼 때, 페이지의 중요한 부분을 볼 수 없거나 심한 경우 다른 페이지로의 이동을 막아, 사용자 경험이 훼손될 것입니다.

회피하기: 반응형으로 생각하십시오. 사이트에서 반응형 디자인 (Wikipedia나 A List Apart article을 보십시오) 을 사용하십시오. 여기 이 주제에 관한 몇몇 유용한 튜토리얼들이 있습니다. 이 튜토리얼들은 반응형 이미지를 포함합니다. 이 영역에서 바로 사용가능한 매우 유명한 라이브러리는 Bootstrap입니다.

8. 의미없는 페이지 제작

실수: 매우 유용할 수 있는 콘텐츠를 포함한 공공(public-facing) 페이지를 제작하나, 검색엔진에 아무런 힌트도 주지 않습니다. 접근성 기능을 구현하지 않습니다.

영향: 페이지를 검색 엔진을 통해 발견할 수 없고 그 결과 적은 사람들 만이 방문하거나 아예 방문하지 않을 수 있습니다. 페이지 콘텐츠는 시력 장애인에게 매우 난해할 수 있습니다.

회피하기: SEO (검색 엔진 최적화)를 이용하고 HTML 접근성을 지원하십시오. SEO에 관해, 키워드와 설명으로 페이지에 의미를 제공하기 위해 <meta> 태그를 이용하십시오. 이것에 관한 좋은 논평은 About Tech에서 찾아볼 수 있습니다. 더 나은 접근성을 위해, <img>나 <area> 태그에 alt="이미지 설명" 속성을 제공하십시오. 물론, 아직 할 일이 많으며, 추가적인 제안은 About Tech에서 찾아볼 수 있습니다. 또한 Cynthia Says에서 공공 웹 페이지가 Section 508을 따르는 지 확인해볼 수 있습니다.

9. 너무 자주 새로고침되는 사이트를 생산

실수: 각 상호작용 마다 완전한 새로고침이 필요한 사이트를 생성.

영향: 비대한 페이지 (실수 #4를 보십시오)와 비슷하게, 페이지 로딩 시간에 영향을 줍니다. 사용자 경험은 유동성이 떨어지고, 각 상호작용이 짧은 (혹은 오랜) 페이지 리셋의 원인이 될 수 있습니다.

회피하기: 이를 회피하는 한가지 빠른 방법은 서버로 다시 보내는 것이 정말로 필요한지 결정하는 것입니다. 예를 들어, 서버 측 자원에 의존하지 않을 때 즉시 결과를 제공하기 위해 클라이언트 측 스크립트를  이용할 수 있습니다. 또한 AJAX 기법 (Wikipedia) 을 도입하거나 단일 페이지 어플리케이션 "SPA" (Wikipedia) 접근을 사용할 수 있습니다. 유명한 JavaScript 라이브러리/프레임워크들은 이러한 방법들의 도입을 훨씬 쉽게 했습니다. 예를 들어, JQuery, KnockoutJS, 그리고 AngularJS 같은 것들이 있습니다.

10. 지나친 작업

실수: 개발자가 웹 콘텐츠를 제작하는 데 너무 많은 시간을 소모합니다. 반복적인 작업이나, 단순히 많은 타이핑에 시간이 소모될 수 있습니다.

영향: 초기 웹사이트 출시 혹은 다음 업데이트를 위한 시간이 너무 길어 집니다. 다른 개발자가 비슷한 작업을 더 적은 시간에 더 적은 노력을 들여 수행할 때 개발자의 가치가 줄어듭니다. 수동 노동은 실수하기 마련이고, 실수를 해결하는 것은 훨씬 더 많은 시간을 소모합니다.

회피하기: 선택지들을 살펴보십시오. 개발의 모든 단계에서 새로운 도구나 새로운 처리 기법을 사용하는 것을 고려하십시오. 예를 들어, 현재의 코드 에디터가 Sublime Text나 Visual Studio와 비교해서 어떻습니까? 사용하는 코드 에디터와 관계 없이, 최근에 그 에디터의 기능들을 살펴봤나요? 문서를 살펴보는 작은 투자가 몇 시간을 현재, 그리고 나중에 절약할하는 새로운 방법을 밝혀낼지도 모릅니다. 예를 들어, 이 글처럼, Visual Studio의 확장이 어떻게 웹 개발자를 위해 생산성을 높일 수 있는 지 알아두십시오.

웹의 사용가능한 툴들을 놓치지 마십시오! 예를 들어, (다양한 플랫폼과 장치에서의) 테스트 단순화와 문제해결을 위한 툴을 dev.modern.ie에서 확인하십시오.

또한 절차를 자동화해 시간과 실수를 줄일 수 있습니다. 예로, 파일 축소 (실수 #4를 보십시오) 와 같은 일들을 자동화하기 위해 Grunt같은 툴을 이용할 수 있습니다. 또다른 예로, 라이브러리/프레임워크를 관리하는 (실수 #9를 보십시오) Bower 있습니다.

웹 서버 그 자체는 어떨까요? Microsoft Azure Web Apps와 같은 서비스를 통해, 사업과 함께 쉽게 조정할 수 있는, 이론 상으로 모든 개발 시나리오를 위한 사이트를 빠르게 제작할 수 있습니다. 

요약

흔한 실수들을 확인함으로서, 웹 개발자들은 다른 이들이 이미 겪어온 많은 좌절을 제거할 수 있습니다. 인정하는 것이 중요할 뿐만 아니라, 실수의 영향을 이해하고 실수를 피하기 위해 노력할 때, 선호를 충족하는 개발 절차를 제작할 수 있고—자신감을 가질 수 있습니다!

JavaScript를 더 적극적으로 활용

이 아티클은 Javascript 학습, 오픈 소스 프로젝트, Microsoft Edge 브라우저와 새로운 EdgeHTML 렌더링 엔진을 포함한 상호 작동성 모범 사례들을 주로 하는 Microsoft 기술 전도사의 웹 개발 시리즈의 한 부분입니다.

저희는 dev.modern.IE의 무료 툴을 이용해 Windows 10용 기본 브라우저인 Microsoft Edge를 포함한 여러 브라우저들과 장치들에서 테스트하기를 장려합니다.

• LINK 오래된 라이브러리, 레이아웃 문제, 접근성을 위해 사이트를 스캔하십시오.
• LINK Mac, Linux, Windows를 위한 가상 머신을 사용하십시오.
• LINK 장치에서 Microsoft Edge를 원격으로 테스트하십시오.
• LINK GitHub 코딩 랩: 크로스 브라우저 테스트와 모범 사례

다음은 저희 기술자들과 전도사들이 제공하는 Microsoft Edge와 웹 플랫폼에 대한 깊이 있는 기술 학습들입니다..

• Microsoft Edge Web Summit 2015 (새로운 브라우저에서 선보이는 것, 새롭게 지원되는 웹 플랫폼 표준, JavaScript 커뮤니티 초청 강연자)
• Woah, I Can Test Edge & IE on a Mac & Linux! (우와, Mac과 Linux에서 Edge & IE를 테스트할 수 있어요!) (Rey Bango)
• Advancing JavaScript Without Breaking the Web (웹을 훼손하지 않고 JavaScript 개선하기) (Christian Heilmann)
• The Edge Rendering Engine that Makes the Web Just Work (웹이 바로 작동하도록 하는 Edge 렌더링 엔진) (Jacob Rossi)
• Unleash 3D Rendering With WebGL (WebGL로 3D 렌더링) (David Catuhe, Vorlon.JS와 BabylonJS 프로젝트를 포함)
• Hosted Web Apps and Web Platform Innovations (호스트된 웹 앱과 웹 플랫폼 혁신) (Kevin Hill과 Kiril Seksenov, ManifoldJS 프로젝트 포함)

다음은 웹 플랫폼을 위한 추가적인 무료 크로스 플랫폼 툴과 자료들입니다.

• Visual Studio Code (Linux, MacOS, Windows)
• Code with Node.js (Node.js로 코딩하기)와 free trial on Azure (Azure 무료 체험)

Create your Azure free account today | Microsoft Azure

출처 https://code.tutsplus.com/ko/articles/10-common-web-developer-mistakes--cms-24791