음향, 보안, 프로그래밍까지! 잡동사니 블로그

잘 쓰고있던 GCE 설정하나를 잘못 건드리는 바람에 깔끔하게 날라갔다.

gce의 ssh 접속 인증이 귀찮아서 조금 건드렸더니, 아얘 접근이 불가능해져서, (기존 서버에선 건드려도 큰 문제없던 부분이라 GCE도 동일할 거라 생각했다.)

결국 새로 밀고 다시 셋팅하기로 했다.

처음엔 직접 웹을 제작하려 했지만,

메뉴얼의 특성, 그리고 혼자만 기록하는게 아니라 자유로운 편집을 전제로 하는 사이트임을 감안했을 때,

위키의 특성과 잘 맞아 떨어진다고 생각했다.

따라서 위키엔진을 이용한 E-mannual을 제작하기로 했다.

개인 서버에 올리려다가 마침 GCE 사용기간이 남아있길래, GCE에 던져둔 가상머신을 이용하여 위키엔진을 돌린다.

다른 친구들의 프로젝트 주제에 대해 들어보았다.
하드웨어와 연관된 프로젝트도 나말고 한명 더 있었다!(핸드폰 구조)

지금 진행하려는 프로젝트의 방향성을 e-manual에 비슷하게 만들거나
위키엔진을 이용한 공개 메뉴얼의 형태로 만들어 보려 한다.

아무래도 e 메뉴얼의 형태로 만들면 직접 나 편한대로 만들고 쓰고, 개인에 포커스가 맞춰진 느낌이라면,
위키엔진을 이용한(미디어위키였나, 전에 한번 써본, 나무위키랑 비슷한거..) 경우, 공개적으로 만들다보니,
내가 생각하지 못한 부분에 대한 피드백이나, 조금 더 전문 지식을 가지신 분들의 도움을 받을 수 있을지도 모른다!

저번에 기본적인 연구계획까지만 작성한 후 자기소개나 그외 부분에 대해선 조금 더 생각해봐야 할 것 같아서 공란으로 비워뒀었는데, 프로젝트 자체를 조금 더 구체화 하고, 프로젝트 계획서 작성을 끝냈다.

다양한 모듈들 중에서도 우선 모터와 관련된 부분부터 찾아나가기로 했다.

다이나믹셀 - emanual.robotis.com/docs/en/dxl/ax/ax-12a/

아무래도 다이나믹셀을 가장 많이 쓰다보니 제일 친숙해서 먼저 메뉴얼을 찾아두었다.

보통 아두이노 키트에 들어있는 일반적인 모터

- 모터 드라이버와 함께 사용(전력 공급문제)

- PWM을 통한 속도제어

보통 모터라고 하면 크게 2가지로 분류한다.

DC모터와 서보 모터로,

작동 범위로만 본다면, DC모터는 회전을 기반으로 하기에 연속적인 움직임, 부가적인 회전각(회전각을 따지는게 사실 의미는 없음)에 제한이 없다.

서보모터의 경우, 회전각의 제한이 생기지만(주로 180도), DC모터에 비해 정밀한 제어가 가능하다.

또한 두 모터의 구성이라 함은 케이블에서도 차이를 볼 수 있는데 주로 DC 모터같은경우엔 2선식 제어를 사용(전원, 접지를 위한, 속도제어는 PWM을 이용하다보니..)하고,

서보모터같은 경우에는 3선식 제어를 사용한다.(전원, 접지 + 제어)

서보

- 3선식 (전원, 접지, 제어)

- 회전각 제한(주로 180도 정도)

- 정밀한 제어 가능

- 뜯어보면 보통 DC모터에 제어회로, 다양한 기어로 구성되어 있음.

DC

- 2선식 (전원, 접지)

- 회전각 제한 없음(회전방향, 속도 제어가능 - PWM)

제일 처음 조사한 다이나믹셀 같은 경우 두가지를 경우에 따라 조절하며 사용할 수 있다.

다이나믹셀의 특징은 3일차에 자세하게 정리할 예정-

자기계발계획서 파일 내용

1p.

1, 간략히 자기소개하기

2. 연구계획

2p.

1.연구 과정과 결과물 설명

2, 연구평가

3p.

결과물 제출 파일 자료 설명(형식 자유, 페이지 제한 없음.

위와 같은 형식의 자기계발계획서를 바탕으로 1人1 프로젝트를 진행하기로 했다.

우선 선정한 주제는 엑추에이터, 모듈 및 다양한 프로토콜 분석을 선정하였다.

아무래도 주제의 제한은 공업과 연관이 있어야 했으므로, 평소 관심분야인 하드웨어와, 그 외 다양한 프로토콜에 대해 접해보고 싶어서 이 주제를 선정하게 되었다.

간단한 연구내용, 과정(프로세스)은

- 분석할 엑추에이터와 모듈을 선정

- 해당 모듈의 구조 분석(HW, SW)

- 프로토콜 분석

위와 같은 순서로 진행할 예정이다.

아직 작성중인 보고서 포함 1人1프로젝트 1일차는 여기서 마무리한다.

MongoDB는

데이터 베이스 중 하나로,

NoSQL의 개념이 적용되어 있다.

기존의 데이터베이스는 복잡한 관계성을 바탕으로 DB를 구성했지만,

요즘에는 대량의 데이터를 단순화 시키다보니, 새로운 저장 기술의 개념으로 NoSQL을 도입했다.

TMI

NoSQL != Not SQL

NoSQL == Not Only SQL

SQL을 안쓴다는게 아니라

SQL만 쓰지 않는다는 의미이다. 

명령어 정리

show dbs

- 만들어둔 db의 목록을 보여준다.

use [DB명]

- 해당 DB를 사용한다.(이후 사용하는 명령어는 모두 해당 DB속에서 작동) / 없던 이름이면 새 DB를 만들어준다.

show collections

- 해당 DB에 있는 collection들을 보여준다. 

db.[Collection명].insert({[key] : [value]})

- 해당 collection에 document를 추가한다.

db.[Collection명].remove([조건],[매개변수])

- collection속의 document를 지울때 사용하며, 특정 조건을 통해 대량 삭제를 하거나, 하나씩 제거할 수도 있다.

db.createCollection("[만들고자 하는 collection명]")

- 해당 DB에 속하는 collection을 만든다.

CLI환경에서도 사용할 수 있지만, 

GUI환경에서도 사용 가능하다.

다만 원래의 목적은 타 서버에서 돌아가는 DB를 읽어오고 관리하는 용도 인 것 같다.(필자는 로컬에서 mongo가 돌아감.)

응용프로그래밍 화면구현 과목 프로젝트를 진행하면서, 수업시간에는 HTML의 기초적인 태그의 사용법을 알려준다.

그러나 처음 설계한 웹사이트를 구현하기에는 수업만으로는 조금 부족할 것 같아서 추가적으로 공부하고 정리한다.

정규수업 + 교내 DETS활동(DETS활동은, 학생이 강사가 되어 다른 학생들을 가르치기도 하고, 수업을 들을 수 있는 활동)

DETS명은 "당신도 이제 불가능 없는 프론트엔드"이다.(물론 전 강사가 아니라 수업들으러 간 학생입니다 ^오^!)

구현 방법은 크게 3가지이다.

1. 깡 HTML

- 정말 HTML에 다 뚜드려 박는 방법이다. 실제로 같은 동아리 친구나, 반 친구 중에서도 이런 친구들 가끔 있다.디자인 구려요!

2. HTML은 거들 뿐, CSS파티!

- 필자는 이 방법을 사용하고 있고, 앞으로도 한 동안 사용할 것이며, 아마 가장 많이 사용하는방법(실무자 X, 학생기준) 일 것이다.

3. 프레임워크 사용(bootstrap, React, 등...)

- 사실 이런 프레임워크를 사용하는 단계라면 보통 프론트엔드에서 개발이 끝나는 것이 아니라, 백엔드까지 고려하기 때문에, 사실상 Node, DB(MySQL, MariaDB, MongoDB 등)가 따라 붙는다고 봐야 한다.TMI : 외주뛰는 친구는 거의 프레임워크 위주로 쓰는 듯.

일단 필자가 선택한 방법도 대세에 따라 바뀐다는 것 같다.

첫 번째로 정말 예전부터 써오던 방식(div파티?)을 사용하면서, 거의 정해진 해상도만 지원하고, 다른 해상도로 가거나 브라우저 크기를 줄여버리면, 난장판이되거나 일부 구역이 가려지는 방법으로, 요즘은 이런방식은 잘 사용하지 않는다고한다. 

두 번째로는 흔히 한 두번쯔음 들어봤을, 반응형 웹사이트이다. 반응형 웹사이트도 정말 다양한 종류가 있지만, 필자가 말하고자 하는방식은, 흔히 display: flex; 로 사용하는, Flexible Box이다.

display: flex;

직역하자면, 유연성있는, 탄력적인 박스(배치)로, 웹사이트의 크기가 변화하면 그에 따라 유동적으로 배치되는 것을 볼 수 있다. 

사실 Flexible Box 하나만 있어도, 대부분의, 적어도 배치에 한해서는 걱정거리가 사라진다.

그러나, 아직 HTML, CSS를 배운지 얼마 안된 웹린이의 입장에서는 아무리 Flexible Box를 써도 태생적으로 구린 디자인을 볼 수 있을 것이다.아님 말고..

구-린 디자인을 해결하기 위한 방법으로는 여러가지가 있는데, 우선 디자인 테마를 잡는것이 중요하다.

https://neumorphism.io/#55b9f3

필자는 neumorphism이라는 요즘 대세라는 디자인을 사용하기로 결정했다.

마치 종이와 같은 느낌을 주기도 하고, 매우 깔끔한 점도 있지만, 확실하게 사용자에게 피드백을 주기 쉬운 디자인이라 가장 좋았다. 

이제 디자인의 방향성을 정했다면?

웹사이트의 테마색을 정해야 한다. 아무리 좋은 디자인이여도 색감이 구리면, 구리게 보인다. 암튼그럼.

https://color.adobe.com/ko/create

위 사이트는 어도비에서 운영하는 사이트로, 원하는 색상 조합을 찾을 때 사용한다.

ex)파스텔톤 컬러..

본래 이런 용도로 쓰게하려 만든 것인지, 각 색상별로 클릭하면 RGB코드가 클립보드로 복사된다.

이제 테마도 정했고, 색도 골랐겠다! 남은 건?

폰트다!

https://noonnu.cc/

눈누 사이트처럼 상업용으로도 이용할 수 있는 폰트를 모아둔 사이트가 있다.

물론 일부 폰트에 대해서는 상업용 사용 불가능일수도 있으니 주의해서 보도록하자.근데 아직까진 본적없음.

참고로 웹폰트라 해서, 웹사이트에서 사용할 수 있도록, CSS코드에 넣을수 있는 형태로 폰트를 제공하니 유의하기 바란다.

@font-face { 
    font-family: 'BMJUA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff')format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face { 
    font-family: 'MaplestoryOTFBold';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFBold.woff')
     format('woff');
     font-weight: normal; font-style: normal; 
     
    }

대충 이런식으로 가져와서 사용할 수 있다.

그 외의 디자인은 스스로 사용하면서 배우는 편이 빠르다. 

정확히 말하자면, 정말 CSS에 있는구문 없는구문 다 배우기에는 시간이 부족하기 때문에, 그때그때 찾는 편이 효율이 좋다고 할 수 있다. ex) margin은 사실 방향별로 조절할 수 있으며, 상하 or 좌우값을 각각 지정해줄 수 있다.(안쓰면 필요없듯..)