안녕하세요. 프로그램을 개발하기 위해서는 어떤 방식을 사용해야 하고, 어떤 순서로 진행해야 할지. 간단한 고찰을 해보고자 글을 써보겠습니다.
1. 제일 먼저 무엇을 만들 것인지를 정해야 되겠죠? 목표가 있어야 과정이 있는거고 결과가 있는 거니까요.
2. 다음은 개발 환경을 설정하는 것입니다. 개발 환경 설정은 크게 다음과 같습니다.
1) 개발 언어 및 프레임워크는 무엇을 사용할 것인가 2) 개발에 필요한 서버, DB 등 외부 환경요소가 필요한가, 필요하면 어떤것을 쓸것인가
3. 다음은 개발 방식을 정하는겁니다. 대표적인 접근 방식은 Top-Down / Bottom-Up 방식이 있습니다. 작은 요소부터 정하고 큰 요소를 정할 것이냐(Bottom-Up) 큰 요소를 정한 다음 작은 요소를 정할 것이냐(Top-Down)
4. 개발 프로세스를 설계합니다. 사실 DB 구축 단계에서는 Table 및 스키마를 설계하는 것도 같이 해야 하지만, DB가 들어가지 않는다면 어떤 절차로 프로그램의 프로세스가 흘러가는지를 정해야 합니다.
그것을 정하는 것이 어렵다면, 다음과 같이 생각하면 됩니다. "무엇을 입력해서 무엇을 출력하는데?"
거기에서부터 접근하면 한 층 쉬워집니다.
5. 이제 다음은 프로토타입을 만드는겁니다. 실제 구현될 화면이나, 예제 프로그램 등에 대한 결과를 표시하는 정도로 말이죠.
그러면 무엇을 어떻게 만들건지가 구체화되겠죠.
6. 다음은 구성요소를 정하는겁니다. 사실 이 구성요소라는 것은 개발하면서 추가될 수도 있고, 빠질 수도 있습니다. 그래서 먼저 대략적인 구성요소를 정한 후 나중에 살을 붙이는 식으로 해도 됩니다.
7. 이제 실제 코드를 하나씩 작성합니다. Top-Down 방식이라면 실행 프로그램을 먼저 만든 후 세부 기능을 하나씩 만듭니다. Bottom-Up 방식이라면 작인 기능을 하나 만든 후 살을 붙이는 식으로 합니다. 필요한 모듈이 있으면 모듈을 생성한 후 불러오는 방식으로 진행하는 것을 권장합니다. 어떤 방식으로 만드는 지는 프로그램의 규모나 성격 등에 따라서 결정을 하는 방향으로 진행하면 됩니다.
예제로 쓸 프로그램은 아직 만들어보지는 않았습니다. 추후 강의자료를 올리게 되면 그 때 다시 다루도록 하겠습니다.
회사에서 쓰고 있는 생산품을 가지고 만들어 보았는데, 사실 저 코드만 가지고는 무엇을 의미하는지 알 수 없으므로 사외비 거리조차도 안돼서 올려보았습니다.
회사에서 필요로 해서 만든건 아닙니다. 언제나 그랬듯 제가 개인적으로 공부하는 과정에서 만들어 봤을 뿐.
이번에 Python으로 처음으로 Word Cloud를 구현해봤는데, 생각보다는 쉽더라고요. 다만 여기에 자세한 방법을 구체적으로 올리지는 못할 것 같습니다. 왜냐하면 구현 방법 자체가 사실상 다른 분들의 블로그에 있는 내용을 거의 참조한 것이다 보니, 무단으로 도용해서는 안될것 같기 때문이랄까요.
그래서 이 글에서는 다른 분들의 저작권을 해치지 않는 의미에서 큰 틀에서 만드는 방법을 간단히 제시해볼게요.
1. 필요한 패키지 및 모듈
from wordcloud import WordCloud, ImageColorGenerator
from PIL import Image
from io import BytesIO
from xlrd import open_workbook
import numpy as np
import matplotlib.pyplot as plt
- wordcloud 패키지는 당연히 필수입니다. WordCloud 모듈도 당연히 필수겠죠.
- ImageColorGenerator는 필수는 아닙니다. 특정 색상을 구현하고 싶다면 get_single_color_func 모듈을 사용합니다. 이 모듈에서는 참조할 Image Mask의 색상을 WordCloud의 색상으로 사용할 때 쓰는 모듈입니다.
- PIL 패키지의 Image 모듈은 Image Mask를 사용하고자 할 때 불러옵니다. Image Mask를 쓴다면 필수겠죠.
- io 패키지의 BytesIO 모듈은 Image Mask를 사용할 때 같이 사용합니다만 필수까지는 아니겠네요.
- xlrd 패키지의 open_workbook 모듈은 Excel 파일을 불러올 때 사용합니다. 텍스트가 Excel파일로 구성되어 있다면 좋겠죠.
- numpy 모듈은 굳이 부연설명할 것도 없습니다. 당연히 필수죠.
- matplotlib.pyplot 모듈은 대표적인 그래프 표시 모듈이죠. 사실 다른 모듈도 있지만 matplotlib처럼 대중적인 모듈도 없습니다.
2. 구현 방법
구현 방법은 다음 순서로 이루어진다고 보면 됩니다.
1) 배경으로 사용할 Image Mask를 불러온다.
2) Word Cloud로 구성할 텍스트의 Excel 파일을 불러온다.
3) Word Cloud 객체를 생성하고, ImageColorGenerator 모듈을 사용하여 색칠한다.
4) pyplot에 표시한다.
참 쉽죠?
결국 프로그래밍을 한다는 것은 별 것 없습니다.
무엇을 만들 것인가 - 그것을 만들기 위해서 필요한 것이 무엇인가 - 어떤 방식으로 표현할 것인가.
복잡한 프로그램이나 시스템을 개발한다고 해도 큰 차이는 없습니다. 이러한 큰 틀을 유지하면서 필요한 구성요소를 판단하고 구성요소를 어떻게 사용할 지만 보면 됩니다.
Python 기초 강좌 자료가 거의 완성되어 가네요. 하나씩 안 올리고 한꺼번에 다 만든 다음에 유튜브에 강좌를 올릴 에정입니다. 책이란 것도 쓰다 만 것을 출판할 수는 없잖습니까. 같은 이치죠 뭐.
하나라도 기초부터 제대로 습득한다면 무엇을 만들더라도 시간만 오래 걸리지, 큰 어려움을 없다는 것.
이상 글 마칠게요.
소스코드는 필요하시다면 비밀댓글로 남겨주시기 바랍니다.
기껏 고생해서 만든거라 배포하기 아까워서 안하는게 아니라, 인터넷 다른 분들 블로그, Stackoverflow 등 자료 뒤져가면서 퍼간다음에 짜깁기한거라서 이 글에 직접 배포하기는 좀 그래서 그런거니 양해 바랄게요.
아직 풍코딩과 관련된 강좌는 유튜브에 올라와 있지는 않지만, 강좌를 준비하면서 개발되는 프로그램은 여기 블로그에 공유를 할 예정이니, 풍코딩에 관심있으신 분 또는 여러 유용한 소스코드를 얻어가실 분은 이 곳에서 얻어가시면 될 것 같습니다.
이번에 쓸 글은 그래픽 이퀄라이저(Graphic Equalizer) 만들기를 해 보겠습니다.
강좌를 쓸 사람인데, 어디 다른데서 있는거 퍼오기나 하는건 존심이 상하기도 하고 그래서, 한번 직접 만들어보게 되었습니다.
먼저 화면 출력 결과는 위와 같습니다. 실시간 그래픽 이퀄라이저 표현이 필요하다면 활용하면 좋겠죠?
그러면 이제 저걸 어떻게 만드는지를 하나씩 살펴보도록 하겠습니다.
이퀄라이저 구현 필수 요소
배경 구현
막대 화면 배치
막대 색상 구현
막대 개수 랜덤 구현
위와 같이 네 가지로 구분할 수 있으며, 이에 기반하여 하나씩 구현해 보겠습니다.
(1) 배경 구현
먼저 이퀄라이저 구현에 필요한 모듈로 다음의 모듈을 사용합니다.
import numpy as np # 다차원 배열 처리 모듈
import cv2 as cv # OpenCV(그래픽 처리) 모듈
import colorsys as cs # 색상변환 모듈
import random as rd # Random 숫자 모듈
다음은 화면 표시를 위한 규격을 설정합니다.
width = 1024 # 너비
height= 600 # 높이
bpp = 3 # 표시 채널(grayscale:1, bgr:3, transparent: 4)
img = np.zeros((height, width, bpp), np.uint8) # 빈 화면 표시
cv.imshow("drawimg",img) # drawing이라는 이름으로 화면 표시
cv.waitKey(0) # 화면 표시 시간을 무제한(0)으로 함
여기서 img 변수의 값이 무슨 뜻인지 이해가 안되시는 분들이 있어서 설명드리면,
TV나 모니터에서 화상을 표시할 때 보면 가로x세로 너비에 픽셀 단위로 점을 찍어서 표시하며, 이 때 np.zeros() 메소드를 사용하여 각 점을 '0'으로 찍는다, 즉 검은색으로 표시하는 것으로 보시면 됩니다. (검은색에 대한 색상 코드 값은 (0,0,0), 즉 '0' 입니다)
그리고 맨 아래 두 줄은 실제 화면에 표시하기 위한 명령어로, cv.imshow() 메소드를 사용해서 img 변수의 값을 "drawing"이라는 이름으로 그리고, cv.waitKey(0) 메소드를 사용하여 화면 표시 시간을 결정합니다.
여기에서 waitKey() 메소드의 파라미터가 1 이상의 숫자일 경우에는 ms 를 단위로 해서 보여주고, 0으로 하면 무제한으로 보여준다는 것을 의미합니다.
위와 같이 img를 설정하고 화면에 표시했을 때 결과는 다음과 같습니다.
만약에 img 값이 '0'이 아니라 '255'로 채워진다면 결과는 다음과 같겠죠?
그러면 어떻게 255로 채우느냐. 다음과 같이 하면 간단합니다.
width = 1024 # 너비
height= 600 # 높이
bpp = 3 # 표시 채널(grayscale:1, bgr:3, transparent: 4)
img = np.full((height, width, bpp), 255, np.uint8) # 빈 화면 표시
cv.imshow("drawimg",img)
cv.waitKey(0)
맨 아래 구문과 같이, np.add() 메소드를 사용하여 255만 더해주면 간단하며, 배경 색상을 어떤 색으로 할 것인지는 위 사항을 참고해서 결정하면 될 것으로 생각됩니다.
(2) 막대 화면 배치
다음은 막대 화면 배치를 해야겠죠.
막대 화면 배치에 필요한 요소는 무엇일까요.
어떤 모양으로
어느 위치에
어떤 크기로
배치하는 것이 중요하겠죠.
먼저 어떤 모양. 바로 사각형입니다.
맨 위와 같이 그래픽 이퀄라이저를 표현하기 위해서는 사각형 형태의 구성요소가 필요하기 때문입니다.
다음은 어떤 위치에 배치할 것인가. 하나의 표를 만들어 보겠습니다.
위와 같은 형식으로 15x6 형태의 표를 배치할 위치로 구상하면 될 것입니다.
먼저 화면을 표시할 크기는 앞서 언급한 것처럼 1024x600 형태로 구성되어 있고, 이퀄라이저는 맨 아래를 기준으로 위로 올라갔다 내려갔다 하는 형태이므로 표의 최상단이 아닌 최하단을 기준위치로 결정해야 합니다.
이 글에서는 맨 아래에서 100픽셀 위에 있는 곳을 최하단으로 결정할 예정이므로, 화면 크기인 600-100=500을 y축 기준선으로 하고, 또한 가장 좌측으로부터 100픽셀에 있는 곳을 첫 번째 위치로 할 예정이므로, 100을 x축 기준선으로 하겠습니다.
x축 기준선: 100
y축 기준선: 500
세번째로는 도형의 크기입니다.
도형의 크기를 결정할 때에는 고려해야 할 요소로, 사각형의 width, height뿐만 아니라, 사각형과 사각형 사이의 거리까지도 감안해야 합니다. 이에 따라 사각형 크기 및 거리를 고려하여 다음과 같이 결정합니다.
사각형 크기: (50, 20)
사각형 간 거리: (55, 22)
위 크기를 감안했을 때, 사각형 간 공백은 50 * 1.1 = 55, 20 * 1.1 = 22, 즉 10% 사이의 간격이 형성된다는 것을 알 수 있습니다.
위 사항을 감안하여 막대를 화면에 배치하기 위한 초기값을 설정하는 코드는 다음과 같습니다.
thickness = -1 # 도형의 형태
rect_w = 50 # 도형 너비
rect_h = 20 # 도형 높이
int_x = 55 # 도형 간 좌우 거리
int_y = 22 # 도형 간 상하 거리
screen_start_x = 100 # 화면 시작 x축
screen_start_y = 500 # 화면 시작 y축
여기서 하나 추가된 것은, thickness 변수입니다.
Python에서는 도형을 그릴 때 사용하는 cv.rectangle() 메소드를 사용하여 그리는데, 이 때 5번째 파라미터는 사각형의 선 굵기를 나타내는 부분으로, 0 이상의 값을 할 경우에는 해당 숫자만큼의 선이 그려지는 반면, -1로 하면 선이 없는 대신 특정 도형으로 채워지게 됩니다. 그래픽 이퀄라이저의 막대는 선 없이 채우기 형태로 나타내므로, thickness 변수의 값도 -1로 설정합니다.
사각형을 그리는 메소드는 cv.rectangle()로, (표시할 이미지, 시작점, 종료점, 색상, 굵기) 형태의 파라미터로 입력됩니다.그렇기 때문에 시작점과 종료점을 설정하기 위해서 rect1_point1, rect1_point2, rect2_point1, rect2_point2 변수를 사용한 것으로 보시면 됩니다.
사실 위 예제는 이퀄라이저를 실제로 그릴 때 사용되는 소스코드는 아닙니다. 하지만 사각형 2개를 그렸을 때 어떤 식으로 배치되는 지를 나타내기 위한 예제이며, 이를 바탕으로 했을 때 그려진 결과는 아래와 같습니다.
(3) 막대 색상 구현
다음은 막대 색상을 구현하겠습니다.
맨 첫 번째 이미지에서와 같이 15개의 색상은 아래와 같이 표시됩니다.
짙은 빨간색을 시작으로 하늘색까지 나누어져서 표시되는데, 이러한 부분은 어떻게 구현했는지를 살펴보겠습니다.
색상코드를 표시하는 방법은 다양하게 존재하지만, PC에서 색상을 표현하는 코드는 rgb코드를 가장 많이 사용합니다. cv.rectangle() 메소드에서 표시되는 색상 역시 rgb코드 형태로, (blue, green, red)의 튜플 값이 입력됩니다.
그러나 RGB코드만 가지고 위와 같이 15개 색상을 아름답게 분류한다는 것은 사실 매우 어려운 일로, 위와 같은 색상을 도출해 내기 위해서는 HSV코드 또는 HSL 코드 등을 통해서 도출이 가능합니다.
사진 출처: www.depositphotos.com
HSV는 Hue(색상), Saturation(채도), Value(명도)로 구분되며, 위 사진은 그중에서도 Hue(색상)을 나타낸 부분입니다.
즉 빨간색부터 하늘색까지의 색상을 표현하기 위해서는 Hue의 각도를 조정하여 표현할 수 있으며, 시작 색상과 종료 색상에 대한 Hue 값은 다음과 같습니다.
빨간색: 0º
하늘색: 180º
그리고 Hue를 기준으로 고루 분리되어 나타내기 위해서는 Saturation과 Value의 값은 고정된 값으로 표시가 되어야 하므로, 원색 그대로가 아닌 채도와 명도가 들어가 있는 식으로 이 글에서는 다음 값으로 설정합니다.
채도(Saturation): 98%
명도(Value): 46%
물론 색상 배열은 원하시는 형태로 직접 해도 되지만, HSV 색상코드를 사용해서 배치했을 때 어떤 식으로 되는지를 알려주는 것이니 참고하시면 될 것 같습니다.
Python에서는 HSV 색상코드를 RGB로 변환하기 위한 모듈을 제공하고 있으며, 서두에 언급한 'colorsys'를 사용합니다.
colorsys 모듈에서는 cs.hsv_to_rgb() 메소드를 사용하며, 파라미터는 (hue, saturation, value)의 값이 들어갑니다.
하지만 hsv_to_rgb() 메소드를 사용할 때 유의점은 입력되는 파라미터와 반환되는 RGB의 값은 모두 0에서 1 사이의 값이 이 됩니다.
입력 파라미터(hue, saturation, value)
hue - 입력값: 0~1 // 실제 코드값: 0º~360º
saturation - 입력값: 0~1 // 실제 코드값: 0% ~ 100%
value - 입력값: 0~1 // 실제 코드값: 0% ~ 100%
출력 반환값(red, green, blue)
red / green / blue - 입력값: 0~1 // 실제 코드값: 0~255
그러므로 위의 빨간색부터 하늘색까지를 나타내기 위한 hsv_to_rgb() 메소드의 파라미터는 다음과 같습니다.
다음은 위의 15가지 색상을 어떻게 나누는지를 나타내는 코드입니다. 코드는 하늘색(0.5)에서 빨간색(0) 사이의 코드를 15개로 나누는 부분으로, 이를 수치화해서 표현하는 부분입니다.
rgb_list = []
hue_size = hue_stop - hue_start
hue_diff = hue_size / count
for i in range(count):
hue = hue_start + hue_diff * i
rgbcode = np.multiply(cs.hsv_to_rgb(hue, saturation, value), 256)
여기서 np.multiply() 메소드는 256을 곱하는 역할을 수행하며, 이는 반환값이 0~1 사이의 값인 관계로 실제 RGB 코드값으로 변경하기 위한 과정으로 볼 수 있습니다.
이제 위의 과정을 토대로 해서 구현된 15가지 색상에 대한 막대를 그리는 코드를 구현합니다. 여기서 중요한 것은 cv.rectangle() 메소드의 색상코드는 RGB 값을 가진 Tuple로, 일반적으로 알고 있는 (red, green, blue)가 아닌 (blue, green, red)의 순서로 배치되므로, 배열 값을 뒤바꾸기 위한 메소드인 np.flip() 메소드를 사용하여 값을 변경한 후 rectangle에 입력하는 식으로 합니다.
여기에서 사용하는 메소드는 여러가지가 있지만, 앞서 나타낼 그래픽 이퀄라이저는 총 6줄 형태로 나타낼 예정이므로, 1개에서 6개 사이의 랜덤 숫자를 호출하는 부분으로 구현하도록 합니다.
eqbar_cnt = rd.randint(1,6)
eqbar_cnt 변수는 1~6 사이의 숫자가 입력되며, 입력된 수를 반복하여 나타내도록 합니다.
앞서 막대 배치를 할 때에는 가장 아래에 있는 막대를 기준으로 하여 나타내므로, eqbar_cnt 변수의 값이 특정 값을 나타낸다면 막대가 그려질 때마다 위로 배치되는 형태가 되어야 합니다. 반복되는 수는 아래와 같습니다.
앞서 나타낸 예제에서는 screen_start_x, screen_start_y의 값을 각각 100, 500으로 하였고, 15개의 막대를 가로로 표시하기 위해서 막대 개수(count)만큼을 반복해서 아래와 같이 나타냈었으며, 이 예제에서는 screen_start_x (100)을 x축 시작점으로 하여, 개수만큼 int_x (55)씩 더해서 막대의 x축을 배치시켰습니다.
y축 또한 마찬가지입니다. eqbar_cnt 변수의 값만큼 반복을 한 다음에, screen_start_y (500) 시작점에서 반대로 int_y (22) 만큼을 빼서 막대를 위로 반복하여 쌓도록 하며, 이를 반영한 코드는 다음과 같습니다.
...
rect_w = 50
rect_h = 20
int_x = 55
int_y = 22
screen_start_x = 100
screen_start_y = 500
...
for i in range(count):
...
eqbar_cnt = rd.randint(1,6)
for j in range(eqbar_cnt):
startx = screen_start_x + i * int_x
starty = screen_start_y - j * int_y
cv.rectangle(img, (startx, starty), (startx + rect_w, starty + rect_h), rgbcode, thickness)
...
eqbar_cnt 을 기준으로 2차 반복문을 수행하도록 한 후, startx 변수는 위 예제와 동일한 형태로 하되, starty 변수를 추가로 생성하여, int_y 만큼을 빼도록 한 후, cv.rectangle() 메소드를 실행해서 그립니다. eqbar_cnt는 rd.randint() 메소드의 임의의 수를 반환하므로, x축을 기준으로 한 막대를 그릴 때마다 막대의 개수는 1에서 6 사이의 랜덤한 값으로 생성하게 됩니다.
랜덤 개수 구현까지 완료되었으면, 이퀄라이저를 표시하는 일만 남았습니다.
이퀄라이저는 0.25초, 즉 250ms 에 한번씩 표시하도록 하며, 한 화면을 반복할 때마다 계속해서 다른 값이 나타나야 하므로, 화면을 250ms에 한번씩 초기화를 시켜줍니다. 이를 반영한 전체 코드는 다음과 같습니다.
import numpy as np
import cv2 as cv
import colorsys as cs
import random as rd
width = 1024
height= 600
bpp = 3
img = np.zeros((height, width, bpp), np.uint8)
thickness = -1
rect_w = 50
rect_h = 20
int_x = 55
int_y = 22
screen_start_x = 100
screen_start_y = 500
hue_start = 0
hue_stop = 0.5
saturation = 0.98
value = 0.46
count = 15
rgb_list = []
hue_size = hue_stop - hue_start
hue_diff = hue_size / count
while True:
img = np.zeros((height, width, bpp), np.uint8)
for i in range(count):
hue = hue_start + hue_diff * i
rgbcode = np.flip(np.multiply(cs.hsv_to_rgb(hue, saturation, value), 256))
eqbar_cnt = rd.randint(1,6)
for j in range(eqbar_cnt):
startx = screen_start_x + i * int_x
starty = screen_start_y - j * int_y
cv.rectangle(img, (startx, starty), (startx + rect_w, starty + rect_h), rgbcode, thickness)
cv.imshow("drawimg",img)
cv.waitKey(250)
글 서두에 나타냈던 결과를 다시 한번 표시하도록 하겠습니다.
그래픽 이퀄라이저는 위 방식을 사용하여 여러 가지 코드를 조합해서 표현이 가능하며, 이 글에서는 단순히 0.25초에 한번씩 랜덤하게 표시하는 정도에 그쳤지만, 이를 좀 더 확장해서 여러 기능을 추가하는 것도 한번 검토해 보도록 하겠습니다.
