안녕하세요. 오늘은 최근 작업했던 특정 서비스의 웹 개편 작업 중 경험한 장애 상황에 대해 포스팅 해볼까 합니다. 새롭게 단장한 고객센터 페이지를 해당 서비스에 적용하고 테스트 까지 잘 맞췄었는데 그 다음 날 장애 상황을 경험하게 되었습니다. 먼저 현재 회사의 많은 서비스 고객센터 페이지가 API 형태로 붙게 되는데요. 그렇다보니 그 많은 서비스들의 고객센터 페이지를 계속해서 만들어 낼 수도 없는 상황인지라 사이트메쉬와 데코레이터 패턴을 이용하여 신규 서비스가 오픈하면 해당 서비스에 맞게 CSS를 입혀 서비스하는 방식으로 몇몇 서비스들이 이루어지고 있습니다. 최근 특정 서비스의 웹 리모델링에 맞춰 변경된 CSS로 작업을 진행하는 도중 문제가 발생했습니다. [상 황] 웹페이지의 리모델링에 맞춰 CSS작업 팀으로 부터 변경 된 CSS를 받아 특정 서비스의 고객센터에 적용해야하는 상황. 물론 CSS를 새로 받게 되면 로컬에서 CSS를 적용시켜보고 웹 페이지를 띄워 노출되지 않는 이미지가 있는지 깨지는 부분이 있는지를 확인하는 작업이 요구된다. 그렇게 여러번의 수정 작업을 마치고 페이코 웹 개편 작업 반영을 하게 되었다. 이번 같은 경우에는 해당 서비스의 메인 페이지 및 다른 부분도 모두 개편되는 부분이라서 여러 팀이 순서대로 반영을 하는 상황. 테스터 분들도 모두 동참하여 반영이 이루어졌다. 그렇게 모든 팀의 반영 및 테스트 작업이 약 7~8시간에 걸쳐 진행되었고 잘 마무리 짓게 되었다. [ 문제상황 ] 반영이 끝난 그 다음날 오전 TTS(TROUBLE TICKET SYSTEM) 5급(등급이 낮을 수록 심각 1~5)을 맞게 되었다. 특정 서비스에 문제가 생길 경우 해당 사이트에 문제 상황이 뜨고 담당자에게 연락이 감. 문제는 고객센터 '1:1문의 페이지'에서 문의를 작성한 후 '완료'하는 버튼이 보이지 않는 상황이었다.
[동의란 밑에 아무 버튼도 노출되지 않고 있음] [정상적인 모습]
그 문제상황을 보고 받고 속으로 '어떻게 그렇게 테스트를 여러번 했는데 문제가 났다는 게 말이되나?'하는 의구심을 받고 페이지에 접속한 결과 정상적으로 버튼이 노출되고 있는 것을 확인하였다. 그럼 그렇지 하며 익스플로러에서도 확인 결과 정상적으로 버튼이 노출되고 있는 것을 확인하였다. [문제원인 & 처리] 그렇게 뭐지???하고 생각하던 중 팀장님께서 외부망으로 접속해보라고 하셨다. 그렇게 외부망으로 접속을 하자 버튼이 노출되지 않고 있음을 파악할 수 있었다. 문제는 변경된 CSS의 버튼의 이미지 경로가 내부망(#밑에 설명) 주소로 박혀있었던 것이다. 보통은 이미지 경로가 해당 작업 하시는 분의 디렉터리 구조에 맞춰 상대경로로 되어 있어 CSS를 받아 적용해보면 어떤 이미지가 없는지 파악이 가능했고 그 이미지를 요청해서 얻어오는 식이었는데 어떻게 보면 뒤통수를 맞은 격이었다. 그것도 딱 해당 2개의 버튼만 "http://{내부망ip}"로 되어 있었던 것이다. 이에 파일을 다운 받아 프로젝트 내에 넣고 경로를 맞추어 준 후 반영을 했지만 뭔가 씁씁한 기분은 가시 질 않았다. #내부망 내부망은 일정 조직 내에서 인터넷이 아닌 내부 네트워크를 통해 PC끼리 자원을 공유하게 하거나 그룹웨어 등을 사용할 수 있게 하는 근거리 통신망(LAN, Local Area Network)로 '인트라넷'을 생각하면 이해하기 쉬울 것 같다. 망분리는 현재 정통망법 시행령에 따라 망법 적용을 받는 기업중 개인정보 100만명 이상, 매출액 100억원 이상의 기업은 의무적으로 망 분리를 실시해야고 한다. 보통 보안적인 이슈 때문에 적용하는 듯 하다. [느낀점] 이런 문제를 처음 경험해 본 나는 적잖이 당황했던 것 같다. 좀 더 꼼꼼히 파악을 했더라면 좋았을 텐데 그렇기엔 그 긴 CSS를 다 파악하기 힘든 상태였고 웹 페이지에 CSS를 적용 후 깨지는 이미지와 CSS에만 초점을 맞춰 작업을 했던게 이런 문제점을 나았다. 외부망으로 한 번 만 확인을 해보았으면 이런 실수가 발생하지 않았을텐데 하는 아쉬움이 남는다. 이번 경험을 계기로 다음부터는 꼭 외부망으로도 접속해 테스트 해보도록 해야겠다. 똑같은 실수를 반복하지 말자. |
'Programming > Programming' 카테고리의 다른 글
동시성 코드와 블로킹(blocking)콜 그리고 아카(akka) (0) | 2017.09.29 |
---|---|
Eclipse 단축키 정리 (0) | 2017.05.24 |
자바 웹 개발시 주요 용어 정리 (0) | 2017.05.24 |
읽기 좋은 코드, 좋은 코드 작성하기 (0) | 2017.05.24 |
Fiddler를 활용한 모바일 웹 디버깅 (0) | 2017.05.24 |