행정안전부는 2020년 7월 30일부로 전자정부 웹사이트 품질관리 지침(행정안전부 고시 제2020-38호(2020. 7. 30., 전부개정))을 개정했습니다. 전자정부 웹사이트 품질관리를 한마디로 정의한다면 행정/공공기관의 웹사이트를 국민이 이용하고자 할 때 이용에 대한 불편을 해소하고 편리성을 높이고자 웹사이트에 대한 품질관리 원칙 및 종합적인 품질관리 기준을 마련한다고 할 수 있습니다.
 

오늘 블로그는 행정안전부 (이하, 행안부)에서 2020년 7월에 개정한 정부 웹사이트의 품질관리 원칙 및 품질관리 기준을 자세히 살펴보도록 하겠습니다.


''전자정부 웹사이트 품질관리 지침이 개정되기 이전에도 전자정부서비스 호환성 준수지침(개정 2017. 12.29.행정안전부고시제2017- 26호)(개정 2017. 12.29.행정안전부고시제2017- 26호)이 있었습니다. 이 지침의 경우, 웹표준 준수, 비표준 제거 및 웹 호환성 확보 등 다양한 웹 브라우저 이용 지원에만 내용이 집중되었습니다.

이제 사용자 이용 측면에서 더욱 현실적인 법안이 개정되었으니 행정/공공기관의 웹사이트 이용 시에 불편함 없이 더 편리하게 이용할 수 있다고 예상해 보면서 실질적으로 어떤 내용이 개정되었는지 확인해 보겠습니다.

[Fig.1] 조문별 주요 내용
(https://www.mois.go.kr/cmm/fms/FileDown.do?atchFileId=FILE_00095282LdKk50g&fileSn=0)

전자정부 웹사이트 품질관리 지침 각 조항의 주요 내용을 정리한 표입니다. 지침의 주요 내용은 크게 웹사이트 품질관리 원칙, 품질관리계획, 품질 진단 및 개선 3가지입니다. 웹표준, 호환성, 접근성, 개방성, 접속성, 편의성, 신뢰성, 유사중복방지 등 품질관리 원칙을 명시하였고, 품질관리계획을 위해 웹사이트 품질관리자를 지정하고 교육할 수 있으며, 행정기관 등은 자체 품질진단 시행, 행안부는 주요 웹사이트 품질진단 시행을 할 수 있습니다.


(기존 지침: 전자정부 서비스 호환성 준수 지침), (개정 지침: 전자정부 웹사이트 품질관리 지침)

[Fig.2] 신구조문대비 전자정부 웹사이트 품질진단 기준
(https://www.mois.go.kr/frt/bbs/type001/commonSelectBoardArticle.do;jsessionid=AQw96T0UD5HJ9fIAOCcvVtnS.node50?bbsId=BBSMSTR_000000000016&nttId=79056)

신구조문대비 전자정부 웹사이트 품질진단 기준을 정리한 표입니다. 전자정부 웹사이트 품질관리 지침 내 별표를 보면 전자정부 웹사이트 품질진단 기준이 있습니다. 이 부분은 품질관리 원칙(호환성, 접근성, 개방성, 접속성, 편의성, 효율성, 신뢰성)에 대한 진단 지표와 진단 내용을 보여주고 있습니다. 기존 지침(전자정부서비스 호환성 준수지침)에는 전자정보서비스 웹 호환성 진단표, 전자정보서비스, 전자정보서비스 모바일 웹 호환성 진단표 두 가지로만 간단하게 되어 있었는데, 더욱 상세하게 세분화하여 품질진단 기준을 마련했음을 알 수 있습니다.

이렇듯, 행정/공공기관의 웹사이트 품질관리 기준은 다양해지고 명확해져서 앞으로 국민이 사용하게 될 때는 편하게 이용할 수 있을 것 같다는 생각이 듭니다.

끝으로 정보화 사업을 수행하는 수행업체 입장에서 한 가지 의문점은, 행정/공공기관에서 나라장터에 웹사이트 구축과 관련된 사업을 공고하게 될 때 위와 같은 품질관리에 대한 요구사항이 많아질 것으로 예상하는데 품질관리 관련된 요구사항은 산출내역에 어떻게 반영되는지 궁금했습니다. 현재 소프트웨어사업 대가산정 가이드(2020. KOSA)를 보면 보정계수 산정 부분에는 품질관리에 관한 내용은 없기 때문입니다.(Fig.3. 참조) 그래서, 국내 SW사업의 품질을 향상하기 위하여 소프트웨어 대가산정 가이드에도 품질관리 지침을 반영한 가이드라인을 제시하는 것이 객관적인 대가산정을 유도하는데 도움이 될 것으로 생각합니다.

[Fig.3] SW사업 대가산정 가이드 2020 개정판(137페이지)
 
 
 
 
 

 

Posted by 人Co

2020/08/30 21:54 2020/08/30 21:54
Response
No Trackback , No Comment
RSS :
https://www.insilicogen.com/blog/rss/response/356



역사를 보면, 인류는 어떤 상황 속에서도 교육을 항상 지속하여 왔습니다.
그러한 교육에 대한 열정이 있었기에 현재의 문명을 이룰 수 있었다고 생각합니다.

COVID-19 상황이 지속되는 가운데 (주)인실리코젠은 철저한 방역지침을 준수하며, 생물정보 인재양성 프로그램을 진행하였습니다. 7월 6일부터 8월 14일까지 6주간 진행된 프로그램의 생생한 후기 함께 보겠습니다.





























작성 : 人CoINTERNSHIP 제11기 수료생
이가희, 이솔휘, 이주연, 진종현, 황성경

Posted by 人Co

2020/08/26 09:00 2020/08/26 09:00
, , , , , , , ,
Response
No Trackback , No Comment
RSS :
https://www.insilicogen.com/blog/rss/response/355

크롬 개발자도구의 숨은 팁 알아보기



웹 기반 관련 업무에 종사하시는 분들은 개발자 도구가 친숙하실거로 생각합니다. Elements 탭에서 CSS를 확인하거나 Console 탭에서 출력된 결과물을 확인하기도 합니다. 저도 웹 개발을 하면서 스크립트 디버깅을 하는 경우가 있는데 그럴 때마다 조금 불편하다는 생각을 하게 되었습니다. 그래서 개발자 도구 꿀팁에 대해 알아보게 되었고 여러분들에게 개발자 도구에서 잘 알려지지 않은 기능을 공유해보려고 합니다.
 
 

 
개발자 도구가 생소하신 분들을 위해 크롬 개발자 도구에 대해 설명하겠습니다. 구글에서 만든 웹 브라우저인 크롬에는 개발을 도와주는 다양한 도구가 기본적으로 제공되는데 이를 개발자도구라고 합니다. 웹 페이지는 많은 요소로 이루어져 있고 이 요소들은 각각 그림, 글, 입력 폼 등 다양한 형태로 존재하게 됩니다. 개발자 도구는 개발자들이 이러한 요소들을 확인하거나 디버깅할 때 자주 사용됩니다.
 

개발자 도구 실행은

  • F12
  • Ctrl + Shift + i

로 실행할 수 있고 아래 사진처럼 [도구 더보기 > 개발자 도구] 를 클릭해서 실행할 수도 있습니다.

[Fig.1] Opening DevTools from Chrome`s main menu (https://developers.google.com/web/tools/chrome-devtools/open)

개발자 도구를 실행하게 되면 여러 가지 패널이 보일 텐데 각 패널의 간략한 특징은 아래와 같습니다.

[Fig.2] DevTools screen

  • Elements : html/CSS 상태 확인
  • Console : 콘솔 (변수 정보를 확인하고 오류 메시지 표시)
  • Sources : 스크립트 디버깅 (break point 지정 및 변수 모니터링 등)
  • Network : 브라우저에서 발생하는 통신 상태
  • Performance(예전 Timeline패널) : 성능 측정
  • Memory(예전 Profiles 패널) : 메모리 사용 형태를 작성하고 누수 탐색.
  • Application(예전 Resources 패널) : 쿠키 및 스토리지 등의 내용 수집
  • Audits : 페이지를 분석하고 최적화를 위한 팁 나열
  • Security : Mixed content 이슈, 인증서 문제 등을 디버깅


 

[Fig.3] Console log

Console 패널에서 호출 결과를 확인하기 위해 위의 그림처럼 출력하는 경우가 많이 있습니다. 이때 결과로 나온 Object를 복사하고 싶다면 어떻게 할까요? 보통 그냥 drag 해서 선택한 다음 Ctrl + c, Ctrl + v 로 복사하는데 이러면 나중에 다시 정리해야 하고 결과값이 많은 Object의 경우 하나하나 펼쳐주지 않으면 [...]이 복사 될 수 있습니다. 이런 불편함을 없애주는 copy이라는 메소드가 있는데 이 메소드를 사용하면 객체가 클립보드에 저장됩니다. 하지만 변수에 담기지 않은 상태, 즉 이미 로깅된 객체는 copy에 바로 담을 수 없고 변수로 지정을 해줘야 합니다.

예시


1. 내가 지정하고 싶은 객채에 오른쪽 마우스를 클릭 후 Store as global variable 선택


 [Fig.4] Select 'Store as global variable'

2. 선택하면 global 영역에 임시 변수로 저장됨

[Fig.5] Save variable

3. 생성된 임시변수를 사용해서 copy메소드 실행

[Fig.6] Copy method

그러면 객체가 복사됩니다.

 


프론트앤드에서 데이터를 얻기 위해 백앤드로 XHR 요청을 보냅니다. 이때 내가 원하는 XHR을 한 번 더 요청하고 싶다면 새로고침을 하는 방법도 있겠지만, 더 쉬운 방법을 알려드리겠습니다.

[Fig.7] Example replay XHR

개발자 도구에서 Network 패널을 선택 후 원하는 XHR요청을 오른쪽 마우스로 클릭하면 Replay XHR이 나오는데 이를 선택하면 해당 XHR을 재요청하게 됩니다.
 
 

 
화면 일부를 캡처하는 것은 이미 여러 가지 툴들이 존재하고 있습니다. 하지만 다음 작업은 웬만한 프로그램으로는 힘듭니다.
  • 스크롤 아래 보이지 않는 부분을 포함하여 웹 페이지에 있는 모든 것의 스크린 샷
  • DOM 요소의 내용을 정확하게 캡처

이런 작업들은 운영체제에 제공되는 스크린 샷 도구로 해결할 수 없지만 개발자 도구에선 해결할 수 있습니다.

시작하기 전에 Command 메뉴를 소개하겠습니다. 리눅스에 셸(Shell)이 있듯이 크롬에는 Command 메뉴가 있습니다. Command 메뉴를 사용하면 명령어를 입력해 Chrome을 조작할 수 있습니다.

Command 메뉴는 개발자 도구를 연 후

  • Ctrl + Shift + p

를 통해 열 수 있고, 아래 버튼을 클릭하여 열 수도 있습니다.


[Fig.8] Opening command from Chrome`s main menu
 
Command 메뉴를 열게 되면 아래 그림과 같이 다양한 명령어들이 있습니다.
 

[Fig.9] Command function
 

제가 Command 메뉴를 설명해 드린 이유는 Command 명령어를 통해 스크린 샷을 할 수 있기 때문입니다.
이제 다시 본론으로 돌아와 스크린 샷에 대해 말해보겠습니다.

1. 스크린 샷 하고자 하는 웹 페이지를 엽니다. 그리고 개발자 도구를 열고 Command 메뉴를 실행합니다.

2. 그런 다음 명령어 screenshot을 입력합니다. 그러면 screenshot에 관련된 여러 명령이 아래에 나오게 됩니다.

[Fig.10] screenshot step 2

3. Capture full size screenshot을 선택하게 되면 현재 페이지의 전체 스크린 샷을 얻을 수 있습니다.

[Fig.11] screenshot 결과물

마찬가지로 DOM 요소의 스크린 샷을 만들려면 스크린 샷 도구를 사용할 수 있지만, 요소를 정확하게 캡처하는 게 쉽지 않습니다. 이때는 Capture node screenshot 명령어를 실행하면 원하는 요소만 선택하여 캡처할 수 있습니다.

1. Elements 패널에서 원하는 요소를 선택합니다.

[Fig.12] Node screenshot step 1

2. 선택한 후 Command 탭을 열어 screenshot 명령어를 입력합니다. 그중 Capture node screenshot 을 선택하면 요소가 저장됩니다.

[Fig.13] Node screenshot 결과물

 


크롬 확장프로그램인 Awesome Screenshot도 전체 스크린 샷을 지원합니다. Awesome Screenshot은 녹화, 공유, 스크린 샷 등의 기능을 제공하는 데 스크린 샷에 텍스트, 주석, 라인, 화살표 및 모양을 캡처한 이미지에 직접 추가할 수 있는 기능이 있습니다.
Awesome Screenshot을 사용하기 위해서는 우선 확장 프로그램을 추가해야 합니다. Awesone Screenshot은 https://www.awesomescreenshot.com/ 에서 무료로 추가할 수 있습니다. 추가한 뒤에는 오른쪽 위에 확장 프로그램을 선택하면 아래 메뉴가 나옵니다.

 

[Fig.14] awesome screenshot 메뉴

  • Visible Part : 현재 보이는 전체화면을 캡처
  • Full Page : 스크롤 아래 보이지 않는 부분을 포함한 전체화면 캡처
  • Selected Area : 선택한 영역을 캡처
  • Visible Part after Delay : 옵션에 따라 3초, 5초 후 캡처
  • Entire Screen & App Window : 화면 공유

  • Annotate Local & Clipboard Image : 내 컴퓨터의 이미지를 편집기로 불러옴

캡처한 뒤에는 바로 여러 도구를 추가할 수 있는 화면으로 넘어가게 됩니다. 무료로 제공되는 부분은 화살표, 도구, 텍스트 등 빨간색 상자 부분이고 등급을 업그레이드하면 노란색 상자 부분의 도구들을 사용할 수 있습니다.

[Fig.15] awesome screenshot 도구

확장 프로그램을 추가하고 싶지 않으신 분, 요소 캡처를 원하시는 분께는 개발자 도구를 이용하는 걸 추천해 드리고 시간 지연 옵션을 원하시는 분, 캡처 후 여러 가지 모양을 직접 추가하시고 싶으신 분들에게는 Awesome Screenshot을 추천해 드립니다.

 


크롬 개발자 도구에서 디버깅을 하다 보면 특정 위치로 이동하기 위해 원하는 위치에 breakpoint를 설정하고 next로 넘어가는 경우가 많이 있습니다. 긴 함수에서도 여러 값을 보기 위해 이러한 방법을 사용하는데 이런 경우 나중에 원치 않아도 걸리게 되어 시간이 지체되고 다시 해체해야 하는 번거로움이 있습니다. 이때 사용하는 기능이 Continue to here입니다. 디버깅 중 원하는 코드 위에 마우스 오른쪽 버튼을 클릭하면 Continue to here 이 있는데 이 기능을 사용하면 breakpoint를 설정하지 않아도 원하는 위치로 이동할 수 있어서 나중에 breakpoint에 걸리지 않고 다시 해체할 필요도 없습니다. 다만 breakpoint가 걸린 함수 내에서만 이동할 수 있습니다.

[Fig.16] Continue to here

만약 특정 이벤트가 발생하는 시점에 호출되는 함수를 알 수 있다면?? 아마 좀 더 디버깅을 쉽게 할 수 있을 것입니다. 개발자 도구에서는 이렇게 이벤트가 발생하는 시점에 break point를 걸 수 있는 기능을 제공하는데 이게 바로 Source 패널에 있는 Event Listener Breakpoints입니다.

[Fig.17] Event Listener Breakpoints

위와 같이 click을 선택하면 click 이벤트가 발생하였을 때 해당 함수에 break point가 걸리게 됩니다. 하지만 문제는 대부분 라이브러리를 사용하기 때문에 아래와 같이 라이브러리 코드에서 멈추게 되는데


[Fig.18] debug

그러면 next 버튼을 계속 눌러줘야 하는 번거로움이 있습니다. 이때 원하는 파일을 디버깅에서 제외하는 기능이 Blackbox입니다. 설정 > Blackboxing > Add pattern... 을 눌러 라이브러리를 등록하게 되면 디버깅을 할 때 해당 라이브러리 코드는 디버깅 대상에서 제외되게 됩니다.


[Fig.19] Framework Blackboxing





이번엔 console 명령어에 대해 알아보겠습니다. 저를 포함한 많은 분께서 console.log()를 가장 많이 사용하실 텐데 console에는 다양한 명령어가 존재하고 있습니다. 이 글에서는 배열을 table로 console 창에 보여주는 법을 알려드리겠습니다. Console창에 console.table([배열객체]) 혹은 table([배열객체]) 를 해주시면 됩니다. 그러면 아래와 같이 예쁘게 결과가 나오게 됩니다.


[Fig.20] console.table()

이미 Console 창에 출력된 결과를 table로 보여주고 싶다면 앞서 알려드린 방법처럼 global 변수에 담은 뒤 사용하시면 됩니다.




Elements 패널에서 간단하게 CSS를 수정해본 경험 다들 있으실 겁니다 개발자 도구에서는 스타일을 쉽게 테스트하기 위해 Elements 패널에서 CSS 수정뿐만 아니라 가상 클래스를 작동시켜 테스트할 수 있습니다. Element 패널에 styles 아래 :hov를 클릭하면 여러 이벤트가 있는데 각각의 이벤트마다 적용된 CSS를 확인, 수정할 수 있습니다.



[Fig.21] Trigger class

또 CSS 스타일을 디버깅할 때, 요소를 숨겨야 할 때도 간혹 있습니다. 이때는 요소를 선택한 뒤 키보드의 H 키를 누르면 요소를 빠르게 숨길 수 있습니다.
 

[Fig.22] ‘H키를 이용한 빠른 요소 숨기기 예시

크롬 개발자 도구의 흰 바탕색이 소스 보기 부담스럽고 눈이 쉽게 피로해지는 분들 있으실 겁니다. 이를 위해 크롬에서는 색상 반전 기능을 제공하고 있습니다.

1. 개발자 도구를 열어 설정을 실행합니다.

[Fig.23] 개발자도구 설정메뉴

2. Performances 메뉴를 선택 후 Appearance 아래에 Theme을 Dark로 변경합니다.

[Fig.24] Theme 변경

3. 다음과 같이 Dark Theme로 변경됩니다.

[Fig.25] Dark Theme

또 Dock의 위치를 원하는 곳으로 변경할 수 있는데 분리, 왼쪽, 아래쪽, 오른쪽 순으로 변경할 수 있습니다. 저는 듀얼모니터를 쓸 때 개발자 모드를 분리해서 사용하곤 하는데 여러분들은 개발하는 화면에 맞게, 취향이나 편의에 따라 원하는 Dock 위치를 바꿔가며 사용하시면 좋을 것 같습니다.

[Fig.26] Dock 위치 변경

 


지금까지 알아두면 편리한 잘 알려지지 않은 기능에 대해 살펴보았습니다. 제가 설명한 기능 외에도 크롬 개발자 도구에서는 다양한 기능을 제공하고 있고 Google에서 제공하는 개발자 도구 공식 매뉴얼(https://developers.google.com/web/tools/chrome-devtools)에 설명이 잘 되어 있으니 이번 기회에 다른 기능들에 관해서 관심 두고 공부하셔서 개발의 질을 높이는 데 도움이 되었으면 좋겠습니다. 감사합니다.

 




작성자 : 대전지사 도선아 개발자

Posted by 人Co

2020/08/17 01:50 2020/08/17 01:50
Response
No Trackback , No Comment
RSS :
https://www.insilicogen.com/blog/rss/response/354

[Webinar] 제5회 유전체 데이터 분석 교육

Posted by 人Co

2020/08/07 14:34 2020/08/07 14:34
Response
No Trackback , No Comment
RSS :
https://www.insilicogen.com/blog/rss/response/353