그룹프로젝트 교육용 앱

 

* 깃헙에 자세한 코드가 적혀있습니다.

 

https://github.com/hanselkang/fantastic_birds

 

 

네 명이 함께 진행한 프로젝트. 

역시 4주간 자바스크립트와 리액트를 배우고 진행했으며 MongoDB 를 함께 배웠지만 나 혼자를 제외한 모두가 우리 프로젝트에서는 사용할 필요가 없다고 판단하에 DB 구축은 따로 하지 않았다.

 

네 명이 진행한만큼 순조롭게 진행하기 위해 각자 교육용 Activity를 정해서 진행했다. 다같이 하나를 끝내기 보다 각자의 프로젝트를 터치하지 않는 편이 낫다고 판단. 이 전에 같이 사용하는 공통의 스타일 언어를 정해뒀다면 더 수월하지 않았을까 싶다.

약 5일의 시간밖에 없었던터라 프로젝트는 워터폴로 진행될 수 밖에 없었지만 초반 네개의 Activity 를 마무리하고나서는 정말 빠르게 Push, Pull Request를 진행하며 완성도를 높여나갔다.

Odd One Out 이라고 새가 아닌 것을 찾는 탭을 결정했지만, 코드가 너무 쉬워 엄청 일찍 끝낼 수 있었기때문에 중요한 원모어띵. 컬러링북을 제작하기로 했다. 

그리고 이 컬러링북은 프로젝트의 메인이 돼서 기관 CEO에게 박수를 받는 일이 ㅜㅜ

 

이 프로젝트에서 나는

• Wireframe, Outline Design
• Odd One Out Activity to pick the animal which is not a bird
• Transform Vector image(SVG) to JavaScript file to make Colouring Book App
• Manage quiz activity to change each answer's colour when user clicks

- 어린이에게 맞는 앱 디자인, 

- 새가 아닌 것을 찾아라!

- 벡터이미지 SVG파일을 이용한 컬러링북

- 그리고 나머지 팀원들이 남겨놓은 디자인 마무리작업

 

을 했는데, 여기서 제일 황당했던 일은 많은 팀원들이 기능이 돌아가는 것까지만 완성하고 CSS 는 건들지 않고 나몰라라 하는 것. 이 수강과정에서 CSS 를 중점적으로 다루지는 않아 더 그런지 모르겠지만 나머지 한 명도 일러스트레이터로 그림을 많이 그렸지만 막상 그림과 웹페이지간의 연계를 전혀 생각하지 않는 다는 것이었다. 

 

 덕분에 남들보다 CSS 를 더 많이 적고 이미 이 다음 프로젝트까지 마치고 수료는 완료했지만 개인적으로 SCSS 를 더 깊게 공부해 적용해볼 예정이다.

 나는 대학생때분터 일러스트레이터를 자주 사용하여 SVG파일에 대해 거부감이 없었는데, 덕분에 컬러링북을 만들면서 쉽게 다가갈 수 있었던 것 같다. 문제는 내 영어실력으로 이 내용을 발표할때 많은 사람들이 이게 무슨 코드냐 이게 무슨 일이냐 하는 질문이 많았다는 것. 무엇보다 이쪽 영어단어나 공부에 조금 더 집중해야겠다. 

 

 

아래는 컬러링북에 있는 팔레트.

모든 SVG 데이터의 Surface 색상은 기본 White 롤 적용해놓는 것이 필수. 

벡터 이미지를 만들때 레이어 순서가 잘 정해져있다면 코드를 그대로 데려와 사용하는데 큰 문제는 없다.

 

1. 팔레트의 경우 현재색상을 우선 white로 정해놓고 팔레트의 색상을 클릭 시 currentColor가 클릭한 색상으로 변경되고, 

2. 다시 마우스로 Surface를 클릭하면 기본 색상 white 가 currentColor로 변경되는 방식

const [fillColors, setFillColors] = useState(Array(30).fill("white"))
const [currentColor, setCurrentColor] = useState('white')

const paintColor = (event) => {
        const newColors = [...fillColors]
        newColors[event.target.id] = currentColor
        return setFillColors(newColors)
    }



const Palette = ({ setCurrentColor }) => {

    const colors = [
        'WHITE', 'RED', 'BLUE', 'NAVY', 'OLIVE', 'GREEN', 'TEAL', 'LIME', 'YELLOW', 'ORANGE', 'CORAL', 'PINK', 'PURPLE', 'FUCHSIA', 'BROWN', 'MAROON', 'BLACK'
    ]

    const changeColor = (event) => {
        return setCurrentColor(event.target.outerText)   
    }
    const changeColorPicker = (event) => {
        return setCurrentColor(event.target.value)
    }

    

    
    return (
        <div id="color-box">
            <div onClick={changeColorPicker}>
                <input id="color-input" type="color" name="head" />
            </div>
            {colors.map(color => {
                return <div onClick={changeColor} style={{ backgroundColor: color, color: color }}>{color}</div>
            })}
        </div>)
}

 

 

<path id="0" fill={fillColors[0]} onClick={paintColor} d="M396.702, ... "/>
<path id="1" fill={fillColors[1]} onClick={paintColor} d="M498.795, ... "/>
<path id="2" fill={fillColors[2]} onClick={paintColor} d="M577.513, ... "/>
 ...
<path id="29" fill={fillColors[29]} onClick={paintColor} d="M417.8, ... "/>

위는 SVG 데이터

<div id="current-color" style={{ background: currentColor }} ></div>

위는 현재 마우스클릭으로 무슨 색상을 칠할 수 있는지 보여줄 수 있는 코드.

 

 

자바스크립트와 리액트

무궁무진한 이야기를 만들어낼 수 있는 언어라는 것을 느꼈다.

 

이 다음 언어는 자바였는데, 처음 생각했던 것보다 쉽게 다가갈 수 있어 좋았다.

파이썬 -> 자바스크립트 -> 자바로 이어지는 이 커리큘럼이 무엇보다 도움이 된 것 같다.

 

전체 앱 데모

 

 

 

 

 

* 조금씩 틀어지는 디테일이 문제. 이 프로젝트를 기점으로 html테이블은 정적 테이블을 보여주는 것 외에는 사용하지 않기로하고 그리드를 배워 활용했다.

* 컬러링북 앱은 개인 프로젝트로 따로 더 많은 그림을 활용해 만들어볼 예정이다.