티스토리 뷰

반응형

조직도를 그리는 방법과 우리가 가져야 할 자세

조직도는 회사, 기관, 단체의 구조를 한눈에 볼 수 있도록 시각적으로 표현하는 도구입니다. 조직도를 통해 우리는 각 부서의 역할과 책임, 보고 체계 등을 명확히 파악할 수 있습니다. 하지만 단순히 조직도를 만드는 기술만 배우는 데 그치지 않고, 조직도에 담긴 메시지와 삶의 교훈을 함께 이해하는 것이 중요합니다. 이번 글에서는 Google Charts를 활용해 조직도를 만드는 방법을 소개하고, 이 과정에서 우리가 가

져야 할 자세를 함께 이야기해 보겠습니다.


Google Charts를 활용한 조직도 작성 방법

Google Charts는 무료로 제공되는 데이터 시각화 도구입니다. 이 도구를 사용하면 복잡한 데이터를 간단하게 시각화할 수 있고, 특히 조직도와 같은 계층 구조를 작성하는 데 유용합니다.

준비 단계: Google Charts 설정

Google Charts를 사용하려면 HTML 파일에 Google Charts의 라이브러리를 불러와야 합니다. 다음과 같은 코드로 설정을 시작합니다:

이 코드를 사용하면 Google Charts의 다양한 기능을 사용할 수 있습니다.

 


구현 단계: 조직도 데이터 구성

Google Charts의 OrgChart 기능은 계층 구조를 간단하게 시각화할 수 있도록 도와줍니다. 조직도 작성의 핵심은 데이터를 계층적으로 구성하는 것입니다. 예를 들어, 한 회사의 대표가 있고 그 아래에 지원 부서와 생산 부서가 있다면, 데이터는 다음과 같이 정의됩니다:

data.addRows([
    [{v: '소현철 대표', f: '<div class="custom-node">소현철 대표<br><small>CEO/President</small></div>'}, '', 'CEO/President'],
    [{v: '관리/영업지원', f: '<div class="custom-node">관리/영업지원</div>'}, '소현철 대표', '지원파트'],
    [{v: '이경묵 공장장', f: '<div class="custom-node">이경묵 공장장</div>'}, '소현철 대표', '제조/생산']
]);

위 데이터에서 보듯이 각 항목은 ‘이름’, ‘관리자’, ‘설명’으로 구성됩니다. 이를 기반으로 Google Charts가 각 노드(박스)를 생성하고, 계층 관계를 시각화합니다.


디자인 단계: 각 노드의 크기와 스타일 조정

Google Charts는 기본적으로 간단한 디자인을 제공합니다. 하지만 allowHtml: true 옵션을 사용하면 노드(각 구성 요소)의 크기와 스타일을 사용자 정의할 수 있습니다. 아래와 같은 CSS를 사용해 각 노드의 크기를 조정하고 스타일을 추가합니다:

.custom-node {
    width: 180px;
    padding: 10px;
    text-align: center;
    border: 1px solid #ccc;
    background-color: #f0f8ff;
    border-radius: 5px;
    font-size: 12px;
}

이렇게 하면 조직도의 각 노드가 읽기 쉽고 보기 좋게 정리됩니다.


전체 코드: 조직도 완성

위 과정을 종합하여 Google Charts를 사용한 조직도의 완성 코드는 다음과 같습니다:

 

        google.charts.load('current', {packages:["orgchart"]});
        google.charts.setOnLoadCallback(function () {
            const data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');
            data.addRows([
                [{v: '소현철 대표', f: '<div class="custom-node">소현철 대표<br><small>CEO/President</small></div>'}, '', 'CEO/President'],
                [{v: '관리/영업지원', f: '<div class="custom-node">관리/영업지원</div>'}, '소현철 대표', '지원파트'],
                [{v: '이경묵 공장장', f: '<div class="custom-node">이경묵 공장장</div>'}, '소현철 대표', '제조/생산']
            ]);
            const chart = new google.visualization.OrgChart(document.getElementById('org_chart_div'));
            chart.draw(data, {allowHtml: true});
        });
    

조직도를 통해 배울 수 있는 삶의 자세

조직도를 만드는 과정은 단순히 기술적인 작업을 넘어, 우리에게 많은 것을 시사합니다. 조직도의 계층 구조는 역할과 책임이 명확히 구분되어 있음을 보여줍니다. 이를 통해 다음과 같은 교훈을 얻을 수 있습니다:

  1. 명확한 역할과 책임의 중요성
    조직은 개인의 역할이 모여 전체를 이루는 공동체입니다. 개인이 자신의 역할을 충실히 수행할 때 전체가 효율적으로 운영될 수 있습니다.
  2. 서로를 존중하는 태도
    조직도에서 모든 노드가 연결되어 있듯, 조직의 모든 구성원은 서로 연결되어 있습니다. 각각의 위치와 역할을 존중할 때 조직은 건강하게 성장할 수 있습니다.
  3. 협력의 가치
    조직도는 혼자서 모든 일을 할 수 없음을 상기시킵니다. 협력과 조화가 없이는 조직이 제 기능을 다할 수 없습니다.

결론: 조직도를 통해 배우는 우리 삶의 자세

조직도는 단순히 구조를 보여주는 도구가 아니라, 조직과 삶의 본질을 이해하는 데 도움을 줍니다. 우리는 각자 자신의 역할을 성실히 수행하며, 서로를 존중하고 협력하는 태도를 가져야 합니다. 이를 통해 조직뿐만 아니라 개인의 삶도 더욱 풍요로워질 것입니다.

Google Charts와 같은 도구를 배우는 기술은 중요하지만, 그 도구를 통해 배운 교훈을 우리의 삶에 적용하는 태도가 더 중요합니다. 여러분도 조직도를 그리며 자신과 주변을 돌아보는 시간을 가져보시길 바랍니다.

반응형
댓글