SW 개발이 좋은 사람

근래에 부산에 자주 가게 되었는데,

버스를 타고 다니다 문득 이상한 느낌이 들었다.

젊은 사람은 보이지 않고 대부분 나이든 사람만이 오고 가고,

길도 왠지 어둡고 좁아 보인다는 생각이 들었다.

부산에 갈 때 마다 살펴 보다,

예전에는 부산역에서 동쪽 위주로 다녀서 몰랐지만

서쪽, 즉 구도심 뒤쪽으로 가니 거의 나이든 사람만이 보이는 것 같았다.

출처: namu1973.tistory.com/508

인터넷을 찾아봤지만, 없는 것인지 찾지 못한 것인지 헤매다,

통계청 자료가 생각나서 혹시나 하는 마음으로 정리해 봤다.

자료: 통계청(국내통계) : 인구총조사 > 인구부분 > 총조사인구(2016) > 전수부문 > 연령 및 성별 인구 – 시군구 자료

부산의 연령대별(2016년 기준) 데이터를 찾아서

다음과 같이 부산의 지역 구 별로 노인(65세 이상)의 비율을 계산해 봤다.

비율 = 구 연령층 인구 / 구 전체 인구

동구, 중구, 서구, 영도구의 65세 이상 노인 비율이 20%가 조금 넘는 것으로 계산되었다.

모두 내가 지나갔던 구도심 주변 지역들이었다.

한 국가의 총 인구에서 65세 이상의 인구가

 7% 이상이면 고령화사회,

14% 이상이면 고령사회,

20% 이상이면 초고령사회라고 하고,

우리나라는 고령 사회(14%)로 2026년에 초고령사회(20%)가 된다고 한다.

그런데, 부산의 4개 구는 이미 초고령사회이고 (2016년 자료)

대부분 고령 사회인 것으로 계산되었다.

인구 수로는 해운대구와 부산진구 등이 더 많았지만

비율로는 이 4 개의 구가 더 높았다.

해운대구와 부산진구등은 모든 연령대의 인구 수가 많았다.

(최근에 재개발된 지역이 많다고 하는데, 구가 아닌 동으로 정리하면 재미있는 정보가 있을 것 같다)

서울은 대부분 14% 미만이었고,

서울시 평균도 13.3%로 부산의 16.3%보다 아주 적었다.

나는 서울에 살고, 부모님은 부산에 사는 모습과 같았다.

내침 김에 광주, 대구, 대전, 인천도 확인해보니

65세 인구 비율이 19%가 넘는 아주 높은 지역이 있었지만

13.2%, 14.7%, 11.9%, 14.5%로 도시 평균이 낮았다.

65세 인구 비율이 높은 지역은 대부분 구도심으로 생각된다.

(비율이 너무 높은 인천의 강화군과 옹진군은 농사짓는 곳으로 봐야 할 것 같은데…)

지나던 길들이 너무 어둡고(날씨 탓도 있겠지만) 좁은 느낌 속에

대부분의 동네가

내가 어릴 적(30년전) 살던 모습과 바뀐 것이 없다는 생각이 들었다.

즉, 대부분 일반 주택이 빼곡한 좁은 길이었다.

그래서 부산의 시군구별 주택 종류 자료를 확인했다.

자료: 통계청(국내통계) : 건설/주택/토지 > 주택 > 주택총조사 > 주택의 종류별 주택 - 시군구

65세 이상 노인의 비율이 20%가 넘은 동구, 중구, 서구, 영도구 아파트 비율은 30%대에 단독 주택은 30% 미만이었다.

(중구는 상업 시설이 많아서 주택 비율이 낮은 듯…)

서울이나 젊은 사람이 많은 지역은 대부분 아파트가 60% 이상이었다.

주택 종류는 단독주택-일반, 단독주택-다가구, 단독주택-영업겸용, 아파트, 연립주택, 다세대주택 등

여러 가지 있지만 이 분야에 대해 관심도 지식도 없기 때문에

단순하게 주택(일반)만 확인해본 결과,

대부분의 노인이 오래된 주택에 살고 있고, 아파트가 많은 지역에 젊은이들이 사는 것 같다.

(주택과 연령의 관계는 좀 더 세밀한 분석을 해봐야 정확할 것 같다.)

간만에 데이터를 들여다 보며

슬픈 마음도 들지만 재미도 있어서 한가지를 더 진행해 봤다.

제공 데는 데이터가 5년 단위(0~4세, 5~9세)로 제공되어

5년후를 예측할 수 있을 것 같다는 생각에 5년후에는 어떻게 되는지 계산해 봤다.

60~64세는 30~64로 묶어서 계산 했는데,

5년 후이니 60~64세를 65세 이상 인구에 넣고

5년간 태어나는 인구를 계산하기 위해 0~4세를 한번 더 더하여 전체 인구를 계산했다.

사망률을 찾아서 계산하는 것이 더 정확하겠지만

굳이 정확한 계산을 필요로 하는 것이 아니라서 생략했다.

2026년에 초고령사회(20%)가 된다고 하는데

부산과 대구는 5년후(2021)에 도시가 초고령사회(20%)가 되고 (다음 표 참조)

부산 동구(31%), 중구(30%)는 30%가 되는 것으로 계산되었다.

(인천은 강화군, 옹진군이 너무 높게 나와 제외)

인구나 노인, 주택등에 대하여 아는 것이 없지만

몇 시간에 걸쳐서 이런 저런 계산을 해보니,

특정 지역(구도심)에 나이 많은 사람들이 살고

개발도 되지 않은 채 예전 모습 그대로 산다는 생각이 맞는 것 같다.

시골에 계신 분들이 평생 살던 그 모습 그대로 사는 것처럼

도시에서도 살던 곳에 그렇게 사는 것 같다.

자세한 사용법은 검색해서 찾아보길 바라고

“개발자가 디자인(CSS)을 알아야 하는 이유”와 관련하여 간단한 사항을 정리한다.

개발자들은 웹 브라우저에서 F12키를 눌러 자바스크립트 디버깅을 많이 쓰고

DOM 탐색기에 대해서는 무심코 넘어가는 경우가 많다.

앞서 언급한 바와 같이 디자인(CSS)는 개발하기 쉽게 해주는 한 방법이 되고

웹 개발에서는 동적으로 HTML 생성을 많이 한다.

제대로 생성되는지, 안 될 경우 쉽게 이유를 파악하고 처리하는 방법을 제공하는 것이 DOM 탐색기이다.

먼저 calendar5.html을 다운받아 실행한다.

이 상태에서 F12키를 누른다.

왼쪽에 보이는 HTML 트리가 DOM 탐색기이고

오른쪽에 보이는 것이 해당 DOM (HTML 태그)에 적용된 스타일(CSS)이 나오게 된다.

HTML은 트리 구조의 계층형으로 구성되는데

태그 옆의 삼각형(▷)을 눌러서 하위(자식) 태그를 볼 수 있다.

다음 그림은 DOM 탐색기에서 1(<div>1</div>)을 선택해서 웹 브라우저에서 1이 선택된 것을 볼 수 있다.

그림 상단의 풍선도움말에 나오듯 옵션이 그렇게 선택되어 있는 상태이다.

왼쪽 옆의 “요소선택”을 하면 웹 브라우저에서 마우스로 선택한 태그가 위 그림처럼 DOM 탐색기에 나타난다.

즉 앞서의 옵션은 DOM 탐색기에서 선택하면 웹브라우저에서 해당하는 태그가

요소 선택은 웹 브라우저에서 태그를 선택하면 DOM 탐색기가 선택되는 방식이다.

다음 그림처럼 요소 선택은 웹 브라우저에서 해당 태그를 선택하고

마우스 오른쪽 버튼을 눌러서 나타나는 컨텍스트 메뉴에서도 실행할 수 있다.

이제 이글의 본론을 이야기 한다.

다음 그림과 같이 태그를 선택하면 DOM 탐색기 오른쪽에 스타일 표시 창에 현재 사용중인 CSS 스타일(Class)이나 직접 입력한 인라인 스타일이 나타난다.

여기서 개발자가 값을 입력해 결과를 바로 확인할 수 있고

잘 모르는 CSS 속성이나 값에 대한 도움을 받을 수 있다.

테스트로 달력의 숫자 정렬을 중앙에서 오른쪽으로 바꾸어 보았다.

CSS 클래스가 calendar 하위에 있는 div (#calendar > div)에 일률적으로 부여되었기 때문에 하나만 수정해도 전체에 적용이 된다.

text-align의 값을 right로 바꾸어 주면 화면에 적용되는 것을 바로 알 수 있다.

이렇게 테스트해 보고 코드를 수정해 주면 된다.

이외에도 그림과 같이 숨겨진 값(hidden 태그)을 확인할 때도 유용하게 사용할 수 있다.

개인적인 경험으로

자바스크립트나 JSP에서 동적으로 HTML을 생성했는데

디자인이 틀어지거나 원하는 데로 되지 않는 경우 이 방법으로 쉽게 원인을 찾고 해결할 수 있었다.

익혀두면 웹 개발에서는 많은 도움이 되니 좀 더 자세한 내용을 찾아보길 바란다.

이 페이지에서는 동일한 웹 페이지를 개발할 때 

개발 언어(JavaScript)만 가지고 할 때와 CSS를 같이 사용할 때의 코드를 비교하여 장단점을 정리하였다.

개발 언어는 예제를 간단하게 구현하기 위해 JavaScript (JS)를 사용하였지만

Java 등 다른 언어를 사용했을 때도 동일하다.

이 예제를 이해하기 위해 간단한 달력 만들기를 할 것이고

예제를 만들면서 개발에 대한 이해도 향상시키기 위해 다음과 같이 단계별로 구성하였다.

1. JS 에서 HTML Table 태그 생성하는 예제
2. 해당 월의 모든 날짜를 가지고 오는 예제
3. 1과 2를 섞어서 JS로 만든 간단한 일자 리스트
4. 3을 보강하여 달력 모양 만들기
   
5. 4의 코드를 CSS와 같이 사용하여 만든 달력
   

먼저, 몇 가지 JS의 코드를 이해해야 한다.

Document 클래스에 있는 

getElementById는 파라메터로 넘겨진 ID에 대한 HTML 태그를 가지고 오는 것이고

createElement는 주어진 파라메터(HTML 태그)를 생성하여 반환한다.

태그를 생성한 후 에는 appendChild로 부모를 지정해 줘야 화면에 보인다.

다음 코드는 달력을 만들기 위한 디자인 코드이다.

즉, 위의 코드는 세로 개수(7)만큼 반복해서 테이블의 행(TR) 태그를 만들고

가로 개수(5)만큼 반복해서 행 안의 (TD) 태그를 생성한다. 

다운로드: calendar1.html

실행하면 다음 그림과 같이 7 * 5로 구성된 테이블(Table) 태그가 생성된다.

다음 코드는 달력을 만들기 위해 날짜를 생성하는 코드이다.

달력은 매월 1일부터 마지막(28, 29, 10, 31)일까지 하루씩 반복하여 출력하는 것이다.

매월 1일(sdate)은 Date 클래스로 현재 날짜를 읽어와 일(day)을 1로 설정하면 된다 (setDate(1)).

마지막 날짜(edate)는 현재 월의 다음달 (edate.getMonth()+1)을 구하여 일자를 1로 설정하면 된다.

마지막 날짜는 다음달 1일인데

반복하는 일자 값을 다음달 1일보다 작게(<) 하면 되기 때문이다 (sdate < edate).

인터넷의 많은 자료가

옛날부터 전해오는 윤달 계산 방식으로 구현되어 있는데,

이 방식은 코드가 복잡하기 때문에

개발언어에서 제공하는 함수를 이용해서 시작일(sdate)과 종료일(edate)을 구하는 간단한 방식을 이용했다.

다운로드: calendar2.html

실행하면 다음 그림과 같이 4월 1일부터 30일까지가 리스트로 출력된다.

첫 번째 코드와 두 번째 코드를 합쳐서 다음 코드를 작성한다.

이 코드는 그림과 같이 모든 날짜가 한 줄에 출력된다.

다운로드: calendar3.html

실행 결과 다음 그림과 같이 4월의 일자들이 테이블 각 셀에 들어가서 나열되었다.

이 코드에 매주 토요일에 새로운 행(tr)이 만들어 지게 하는 코드를 넣어주면 된다.

getDay함수는 각 날짜의 요일(0~6)을 반환하는 함수로 

일요일은 0을, 토요일은 6을 반환한다.

따라서, 일요일부터 시작하기 때문에 getDay로 반환된 값이 0이면 새로운 행(TR)에 데이터를 출력한다.

조금 더 달력스럽게 보이기 위해 1일의 요일을 맞춰줘야 한다.

매월의 시작일이 무슨 요일일지 찾아서 그 개수만큼 공백을 넣어줘야 달력처럼 보인다.

변수의 값이 1일 일 때 getDay로 요일(0~6)을 파악하고, 요일 개수만큼 열(TD)을 생성하면

요일을 맞춰서 보여주게 된다.

다운로드:calendar4.html

제법 많은 코드가 생성된 것을 알 수 있다.

마지막으로 CSS를 사용한 다음 코드를 보면 코드 양이 다른 것을 확인할 수 있다.

다운로드: calendar5.html

DIV를 동적으로 생성해서 날짜 값을 넣어준 것이 전부이다.

실행 결과는 그림과 같이 JS만 사용했을 때랑 동일하다.

코드에 IF 문을 사용하지 않는다.

(개인적으로 프로그램을 쉽게 짜기 위해 IF 문 사용을 자제하는 걸 선호한다)

이유는 전체를 감싸는 DIV(calendar)의 크기를 150px로 주고

하위의 날짜 DIV의 크기를 20px로 줘서

7번째 (140px)까지 채우고 8번째가 되면 다음라인으로 배치되는 특성을 이용 한 것이다.

JS에서 처리 하지 않았던 글자의 중앙정렬(text-align)도 추가했다.

배경색등 더 추가해도 CSS처리하기 때문에 JS 코드에 변화는 없다.

이외에도 CSS를 이용하여 보다 쉽게 문자열 자르기등의 기능을 이용할 수 있다.

이렇게 처리하는 것이 중요한 이유는

1. 코드가 간단해 진다는 것이다. 

   개발언어에서 모든 것을 처리하면 당연히 양이 많을 수 밖에 없다.

2. 코드와 디자인을 분리하면 디자인 부분을 남(디자이너 등)에게 맡길 수 있다는 것이다.

    코드와 디자인 부분이 같이 있으면 누가 처리할 것 인지 하는 문제와 더불어

    개발자가 하면 디자인 부분의 누수가 생기고

    디자이너가 하면(?) 버그를 양산 할 수도 있다.

    그래서 중간 영역의 작업자가 있지만 쉬운 일은 아니다.

Spring이나 Struts등 Java나 다른 개발 언어를 사용하여 만드는 경우도 위와 동일하다.

IF 문 처리 부분에서 더 복잡한 코드로 처리되는 데 CSS로 처리하면 깔끔하게 구현할 수 있다.

간단하고 깔끔하게 구현되어야

차후에 수정하거나 다른 사람과의 협업 등에 편리하다.