Project 1 : 가상키보드(4) - 개발 완료

어제 오늘 나름 집중을 해서 프로젝트를 완성 시켰다.

원래 가상 키보드는 2D로 충분한 기능을 수행하지만, 3D를 적용시켰을 때 어떤 모습일지 궁금했었다.

그래서 관련된 프로젝트들을 찾아보다가 3D가 적용된 키보드를 보게 됐다.

바로 적용해봤다. 해당 코드를 계속 보면서 웹페이지에서 수정한 다음 정상작동이 되면, 그걸 코드에 적용시키고 이걸 반복하면서 내가 어느정도 원하는 기능이 구현이 됐었다. 그런데 난관에 부딪혔다.

내가 원하는 방식으로 구현할려면 처음부터 다시 짜거나 아니면 기존 코드에 수정을 가하는 방식으로 해야 됐다.

 

나는 후자를 선택했고, 그 과정에서 css의 transform, property, display, position 등에 대해서 여러가지 공부를 하게 됐다.

css에서 가장 힘들었던 부분은 키 하나를 박스의 형태로 일반 키보드처럼 보여지게 하는 것이였다.

이렇게 구현하고자 했던 첫 번째 이유는, 내가 참고했던 코드는 키보드를 위의 뒤쪽에서 봤을 때 키보드의 왼쪽 부분은 괜찮았지만, 오른쪽 부분에서 키의 아랫부분이 허전했기 때문이다. 

그리고 두 번째로는 영어만 클릭할 수 있는 키보드 보다는 한글도 클릭할 수 있도록 수정이 필요했기 때문이다.

보통 css로 3d를 구현하려면 다음과 같은 구조로 설계가 돼야 한다. 해당 코드는 여기 있다.

<div class="scene">
  <div class="box">
    <div class="box__face box__face--front">front</div>
    <div class="box__face box__face--back">back</div>
    <div class="box__face box__face--right">right</div>
    <div class="box__face box__face--left">left</div>
    <div class="box__face box__face--top">top</div>
    <div class="box__face box__face--bottom">bottom</div>
  </div>
</div>

일반적으로 3d를 구현하려면 앞, 뒤, 좌, 우, 위, 아래에 해당하는 엘리먼트들을 하나씩 만들어야 한다고 한다.

그래서 난 다른 방식으로 구현을 했는데, 일단 div 엘리먼트의 가상 선택자인 after, before를 사용해서 앞, 우, 아래를 구현하고, 뒤, 좌, 위도 똑같은 방식으로 구현을 했다. 2개의 div엘리먼트를 가지고 6개의 엘리먼트로 구현한 것과 똑같이 보이는 효과를 냈다. 물론 이건 다른 다각형을 구현할 때는 불가능한 방법이지만, 내가 구현하고자 하는 박스 형태는 가능했다.

 

 

js에 대해서는 이미 알고 있었던 것들이 많기 때문에 배운 건 없었다. 다 기본적인 코드로만 구현이 가능했다.

또 힘들었던 부분은 3d 키에 대한 html을 다시 작성해야 했었다. 그래도 어찌저찌 나의 기준에서는 만족하는 수준의 기능을 구현해서 좋다.

추후에 react로 훨씬 더 깔끔한 코드와 확장이 가능한 라이브러리 형태로 만들 수 있겠다.

 

간만에 내가 원하는 기능을 구현할 수 있어서 약간의 성취감이 있었다.

 

아래는 3D 키보드를 만들면서 참고했던 자료들이다.

솔직히 실력 좋은 개발자들은 아래 첫 번째 자료만 가지고 만들 것 같다...

참고 자료

https://codepen.io/schwiiiii/pen/BarVMxq

[Pure CSS] - RGB Keyboard w/ Dark Mode

https://3dtransforms.desandro.com/box

Box · Intro to CSS 3D transforms

 

Github

https://github.com/LeeSangMin1029/virtual_keyboard

GitHub - LeeSangMin1029/virtual_keyboard