💻 Touch My Coding 7주차 📱

어느덧 7주차까지 왔네요.

7주라는 시간이 긴 시간이기도 하고 짧은 시간이기도 하고, 흠 열심히 안한 제 자신을 반성합니다.

어느덧 기간으로 따지만 졀반을 넘어온 이 시점에서 개발 열심히 해야할듯 합니다.

기능정리

Front

시나리오

형식없는 무의식의 흐름으로 적겠습니다.
사용자는 저희 플랫폼에 들어옵니다. 처음엔 가이드가 흘러나옵니다. 웹을 구성할 때 각자의 페이지가 있는 데 페이지에 대한 이름을 지정합니다.
사용자는 처음 들어왔으니 처음 페이지에 대한 이름을 지정합니다.
사용자는 코드 작성을 완료 한 다음, 결과 도출을 하면, 코드 결과물을 볼 수 있는 별도의 페이지를 제공 받습니다.
사용자는 url에 접근하여 사용자가 만든 웹 결과물을 진동을 통해 만질 수 있습니다.
사용자는 이 페이지를 앱으로 만들 고 싶을 시 form의 이메일을 기입하여 향후 flutter로 패킹된 앱 파일을 제공받을 수 있습니다.

IA

먼저 프론트에 필요한 페이지를 생각해보았습니다.
크게 보면 3종류의 페이지가 필요해보입니다.

서비스 페이지(코드를 입력하는 페이지)
코드 결과물 페이지
어플 신청 페이지
현재 별도의 로그인 기능을 생각하고 있지 않습니다. 그로 인해 사용자가 작성한 코드를 저장하기 위해 web browser storage(Local Storage)를 활용할 생각입니다.
이를 통해 사용자는 웹을 다시 나갔다 들어와도 코드가 저장된 것을 볼 수 있습니다.

음성체계

사용자가 필요한 기능을 음성체계를 통해 구현하고자 합니다.
웹을 구현하다보면 페이지가 많이 나올 것이고 그럼 그 페이지를 어떻게 핸들링할거냐?라는 의문이 생겼고 저희팀은 각각의 page마다 이름을 부여하고 그 이름을 부르는 형식으로 해결하고자 합니다.
저희가 생각한 명령은 다음과 같습니다.

guide
⇒ 전체적인 서비스에 대한 가이드를 설명해줌

new page

⇒ 페이지가 새롭게 생성된다. 이떄 화면에는 페이지 이름 입력창이 뜨며 “페이지 이름을 적어주세요”라는 음성이 들린다.

⇒ 입력이 완료되면은 지정한 이름이 맞는지 확인하고 맞으면 enter 아니면 space를 누르게한다?

move page
```
⇒ 이동할 페이지 이름을 입력하세요 라는 음성과 함께 화면에는 페이지 이름 입력창이 뜬다.
```
⇒ 사전에 사용자가 정의한 이름의 페이지가 존재하면 그 페이지로 이동 후, 페이지 이동이 완료(Complete to move page {pageName})되었습니다 라고 음성이 뜸
⇒ 만약 없는페이지의 이름이면 존재하지 않는 페이지입니다(Not valid page) 라고 음성이 뜸
delete page

⇒ 삭제할 페이지 이름을 입력하세요 라는 음성과 함께 화면에는 페이지 이름 입력창이 뜬다.
⇒ 사전에 사용자가 정의한 이름의 페이지가 존재하면 정말 삭제하시겠습니까? 맞으면 y 취소한다면 n 키를 입력하세요 라는 음성이 뜸
⇒ 만약 없는페이지의 이름이면 존재하지 않는 페이지입니다(Not valid page) 라고 음성이 뜸
page list
⇒ 현재 존재하는 페이지 이름을 전부 읽어준다.
start project
⇒ 현재까지 완성된 결과물을 볼 수 있는 페이지를 제공한다. 이 때 url을 음성으로 제공해준다.
search icon
⇒ 사용자가 찾고자 하는 아이콘의 이름을 입력받는다.
⇒ 입력값에 따른 아이콘 결과값을 말해준다.
search image
⇒ 사용자가 찾고자 하는 이미지의 이름을 입력받는다.
⇒ 해당 이미지를 클릭하면 이미지에 대한 간단한 caption을 읽어준다.
build app
⇒ 현재까지 만든 결과물을 이메일로 받을 수 있게 해줌

진동체계

사용자가 결과물을 받을 때 영역, 태그마다 각각의 진동특성을 두고자 합니다.

Backend

이미지 머신러닝 코드 작성

사실 백엔드에서는 큰 기능은 없는 것 같습니다. 대부분 프론트에서 다 처리가 될 예정입니다. 백엔드에서는 Web으로부터 사용자가 검색하고자 하는 이미지 키워드를 string으로 받습니다.
그 검색 키워드를 기반으로 이미지를 크롤링하고 백엔드 서버에서는 그 크롤링된 이미지를 머신러닝을 돌려 Reponse로 이미지 주소와 이미지에 대한 정보를 담긴 데이터를 같이 넘겨줍니다.

더 생각해봐야 할 것

html코드는 엄청 길죠… 추상화 환경이 안되는 건 물론이고, React를 사용하는 것도 아니기 때문에, 조그만 복잡해져도 몇백줄은 나올겁니다.
그럼 만약 사용자가 특정 영역을 디버깅 하고 싶다면, 그 부분을 어떻게 가이드 해줄 것인지도 생각을 해봐야 할 것 같아요.

예를 들면 제가 생각 한 방안은, 코드가 저장될때 덩어리 단위로 id를 부여하고, 사용자가 모바일 환경에서 디버깅시 그 id를 읽어준다는 방식으로 최대한 음성기능을 많이 활용해보려 합니다.

<7주차> touch_my_coding