4년간 기술 위주의 스타트업 / 건설 하면서 느끼는 것

조금 있으면 나도 만 4년을 꽉 채워 일한 디자이너가 된다. 게다가 지금 회사에서만 4년이다. 4년간 일하며 느꼈던 것들이 참 많은데 요즘은 또 이런 내용의 생각을 많이 한다. 기술 위주의 스타트업에 있다면, 게다가 지금 있는 분야가 디지털 불모지라면 비슷한 고민을 하는 분들이 많을 지도 모르겠다. 아직 브런치에 올릴만큼 정리된 생각은 아니라서 짧게 티스토리에 남겨본다. 다른 버티컬 B2B 제품이나 B2C 제품 이야기를 보면 보통 처음에 고객 세그먼트를 좁게 정의하고 그에 맞추어 MVP를 출시해 → PMF를 찾아가는 느낌인데 우리 회사는 많이 다르다고 느꼈다. 기술 위주의 솔루션이기 때문에 일단 기술부터 MVP로 구현시켜두고 → 가능성 있을만한 '잠재' 고객들을 매우 넓게 찾아다닌다. → 찾으면 그때부터..

☕️ 프로그라운드 커피챗

오랜만에 서울대 입구 가서 커피챗 진행...은 커피는 안마셨고 사무실 들어가자마자 물만 드링킹... 생각했던 것보다 사무실이 컸다. 회의실에 자리를 잡고 진행하셨는데 아예 IR자료를 보여주셨다. 왕... 연락을 해주셨던 분은 대표님이셨는데, PO 두 분도 함께 참여하셔서 얘기하는 자리가 되었다. 어... 어쩌다 내가 브런치 글을 쓴다는 이야기가 나와서 했는데, 나를 유명한 사람으로 생각하신 것 같기도 하고...? 그건 아닌데,,, ㅎ,,,,,,,ㅎㅎ,, 설명할 수록 더 장황해지는 것 같아서 그냥 넘어갔다,,, ㅎㅎ 코호트 분석, Web3 이야기들도 하니까 예전에 들어봤던 키워드들이라 열심히 듣게 되기도 했다. '역시 B2C는 이런 걸 중요하게 보시는구나' 하고 체감할 수 있었다. 검색했을 때 2016년에..

커스텀 위젯과 ListView() 위젯 사용 방법!

새로운 마음으로 시작한 프로젝트 :) 1. Custom Widget 사용 방법 2. 궁금할까봐 해주신 문법 설명 3. Custom Widget 말고 변수/함수로도 축약 가능 4. 아무거나 다 Custom Widget으로 만들지 말걸아,,, 5. ListView() 사용 방법 6. 숙제! 1. Custom Widget 사용 방법 레이아웃을 만들고 싶은데 너무 길다? 단어 1개 작명해서 깔끔하게 할 수 있다 = 커스텀 위젯! 맨 밑에 stless라는 단어를 입력하고 Tab이나 Enter를 누르면 class ~ 어쩌고 저쩌고 하는 코드 몇줄이 자동으로 생성된다. 이때 따로 뭔가를 클릭하거나 키보드를 누르지 않은 상태면 class 뒷 부분이 선택된 채로 타이핑할 수 있는데, 여기가 [작명]하는 부분임 나는 코딩..

☕️ 앤츠 디자이너 은희님 커피챗

브런치에 썼던 글을 보시고 이메일로 연락을 주신 분이 계셨다. 탄소회계라는 생소한 분야에서 B2B 제품을 만드시기 시작한 프로덕트 디자이너 은희님이었다. 아... 탄소회계라... 🫠 마침 은희님 회사가 역삼 쪽이라 근처에 있는 카페에서 뵙기로 했다. 열심히 걸어서 도착했는데 루이보스 티를 사주셨다 홍홍... 감사히 잘 마셨다... 🍵 내 글을 보시고 내가 산전수전 다 겪어본 분이겠구나 생각하셨다고 한다,,, ㅎㅎ 꼼꼼하게 읽어주셨던 것 같아 참 감사했다. B2C 쪽에서 UX Researcher로서 일하시다가 B2B 제품 디자인은 처음 맡게 되어 여러모로 힘드신 점이 많은 것 같았다. 개선할 수 있는 시기가 오기는 하는 건지 물으시는 걸 보니 많이 답답하시구나 싶었다 ㅎㅎ,,, 이런저런 질문을 하셔서 열심..

개발자 W님의 도움을 받아 안되던 것 해결 + 단축키 특강 ⌨️

토요일에 못풀었던 문제... 오류 나고 타이틀이 안보이던 건 Flexible() 안에 있던 Text() 부분을 W님이 RichText()로 바꿔서 썼더니 에러들이 없어지고 잘 표시됨!! 그리고 이어진 특강ㅋㅋㅋ 1. Settings > Appearance & Behavior > New UI를 켜기 베타로 나온 새로운 UI인데, Command + 5 눌러서 밑에 콘솔창 켰다 껐다가 가능하다!! 2. Tools > Actions on Save에서 Reformat code, Rearrange code 켜기 켜두면 Command + S 눌러서 저장할 때 코드 탭 안맞는 것들 정리해줌 , 있으면 내려주고 없으면 올려주고 해줌! 3. option + Enter 눌러서 Wrap with~이랑 Remove this W..

코딩애플 5강, Flexible()과 Expanded()를 배웠다!!!!!

1. Row, Column 안에서 고정값 말고, 비율로 박스를 채우고 싶다? 1-1. Flexible()로 하는 방법 1-2. Expanded()로 하는 방법 2. 박스 디자인했는데 의도와 다르다? 3. 당근 숙제 코딩애플이 푼 방법!! 4. 오늘 배운 Expanded()를 적용해서 반응형처럼 못했던 부분 바꿔주기!!! 5. 잊지 않고 Github에 Commit and Push! 1. Row, Column 안에서 고정값 말고, 비율로 박스를 채우고 싶다? Container(width: 50%), 같은 짓은 하지 말자,,, 1-1. Flexible()로 하는 방법 body: Row( children: [ Flexible(child: Container(color: Colors.blue), flex: 3), ..

Github 최초 커밋...!!

유튜브도 찾아보고 Github에서 쓰인대로 터미널에 입력해서 처음 커밋/푸시 해보려고 했는데, 자꾸 에러가 나서 오늘 E님께 도움 요청 ,, 자꾸 뭐가 있는데 없다, 없는데 있다 이래서 둘다 혼란ㅋㅋㅋㅋ 그런데 안드로이드 스튜디오 안에서 Commit Tab을 눌러서 깃헙에 커밋할 수 있는 걸 알게 되어서 그렇게 하기루 했다. E님 뇌피셜로는 터미널하고 뭔가 싱크가 잘 안 맞은 것 같다며. ㅇㅅㅇ... 글쿤! 어쨌든 나는 UI로 하는 게 더 편하긴 하니까 커밋 탭 열심히 써보는 걸로... Commit and Push 버튼을 눌러서 처음으로 Github에 커밋을 해봤는데 요렇게 나왔다 호호 이제 커밋 탭에서 이렇게 맨날 할 수 있당... E님이 다 해줌 호호 왼쪽은 원래꺼, 오른쪽이 수정한건데 자동으로 수정..

숙제) 당근마켓 UI 따라해보기 - 진짜 머리털 다 빠지겠다

저번 시간(4강)에 코딩 애플에서 당근마켓에 있는 이 리스트용 컴포넌트를 최대한 비슷하게 만들어오라구 했다. 5강이 자동으로 넘어가서 끄려고 했는데 마침 제목이 '숙제 안해오면 때림'이라서 더 급하게 꺼줌,, , ㅎ 오늘 아침 11시부터 했는데 생전 처음 개발해보는 복잡한 구성에 계속 되는 에러에 머리털 다 빠지는 줄.,,, 이래서 개발자 대머리 밈이 만은 걸가..,,,.?,??,.,? 아무튼 오늘은 내가 했던 순서대로 대충 차례 정해봄 1. 계속되는 에러의 향연.. 2. ♡4 넣기 3. Container 높이 지정해서 저쪼아래 박스를 데려오자,, 4. Row 안에 있는 Container에 마진을 주자 5. Column의 children으로 추가한 텍스트들 왼쪽 정렬 6. 타이틀 maxLine 지정 7...

텍스트스타일, AppBar!

1. TextStyle() 위젯으로 디자인 입히기 1-1. 텍스트 Color 넣는 3가지 방법 1-2. 자주 쓰이는 다양한 파라미터들 2. 버튼을 넣어보자! 3. AppBar와 자주 쓰이는 파라미터들 4. 다음 시간 숙제 소개 5. 레이아웃 혼자서도 잘 짜는 법 💡 1. TextStyle() 위젯으로 디자인 입히기일단 '안녕하세요'를 body에 child를 만들어 넣어보자. Text() 위젯 안에 style이라는 파라미터를 쓸 수 있다. style: TextStyle(원하는 스타일 파라미터 추가)body: SizedBox( child: Text('안녕하세요', style: TextStyle( fontWeight: FontWeight.w700), ) )예를 들면 이렇게! 1-1. 텍스트 Color 넣는 3..

📦박스📦 잘 그려야 앱 잘 만든다!!!!

오늘의 차례 1. 박스 여백 주는 법: margin, padding 파라미터 1-1. margin 적용 전후 1-2. padding 적용 전후 2. 박스 기타 꾸미는 옵션들: decoration 3. 박스 Center()말고도 다르게 정렬 바꾸는 법: Align() 4. 나 혼자 해보기 1. 박스 여백 주는 법: margin, padding 파라미터 1-1. magin 적용 전후 margin: 바깥쪽 여백 margin 파라미터를 쓰지 않으면 박스가 왼쪽 위에 딱 붙어버린다. 1-2. padding 적용 전후 padding: 안쪽 여백 padding 파라미터만 쓰면 차이를 모르기 때문에 잠깐 박스 안에 글자를 넣어서 테스트한 것. child를 사용해서 텍스트 추가! 왼쪽은 박스의 왼쪽 위에 딱 붙어서 텍스..

숙제) bottomNavigationBar 아이콘 가로정렬 + padding 넣기 완!!!

이것이 코딩애플에서 내준 숙제.... 아래에 bottomNavigationBar에 아이콘 3개를 가로로 정렬하면 되는 간단해보이는(??) 숙제. 아 오늘거 들었으니까 삽가능이지 ㅎㅎ 하고 바로 시작했는데 ...? 왜 다 빨간데요... 그냥 bottomNavigationBar 아까 써둔거에 그대로 하면 되는거 아니엇냐고요ㅠ 원인 모를 에러 와장창 나와서 당황... 내가 뭘 또 잘못했을까 싶어서 구글링 해봤는데 뭔가 배운 적 없는 것들이 너무 많이 나와서 제쳐두고 다시 해봄… 아이콘을 넣는게 아니라 진짜 버튼으로 작동하도록 넣어야 해서 만든 코드들이란 느낌…??? 그래서 막 에러 표시되는 것들 다시 차근차근 읽어보고, 왼쪽 옆에 뜨는 빨간 전구도 눌러보고 하니까 자동으로 고쳐지는 것들이 좀 있었음 예를 들면..

머리! 가슴!! 몸통!!! 레이아웃 Scaffold로 구성

1. MaterialApp(), CupertinoApp() 위젯 2. Scaffold 위젯 3. 여러 위젯을 가로/세로로 배치하는 법 3-1. 가로/세로 = Row/Column 3-2. 가로 정렬 + 가운데 기준 정렬하는 법 3-3. 세로 정렬 + 가운데 기준 정렬하는 법1. MaterialApp(), CupertinoApp() 위젯MaterialApp() → 이것도 구글에서 제공하는 ‘위젯’이다. 1. 구글 스타일로 하고 싶다: MaterialApp() 2. 애플 스타일로 하고 싶다: CupertinoApp() 3. 커스텀하고 싶은데용?: MaterialApp() ...위젯 없이 하려면 코드 양이 3~4배가 늘어나기 때문에 꼭 쓰는 게 좋다고 한다. 나중에 구글물 빼는 작업하면 된다 함… 2. Scaf..

기본 위젯 4개를 배웠는데, 기본부터 어려워서 슬픔

환경 세팅했을 때처럼 코딩애플로 1강 시작... 오늘의 차례,, 프로젝트 생성, 기본 세팅 Lint 끄기 메인에서 stless 입력 기본 위젯 4개 쓰는 법 Text() Icon() Image.asset('') Container() or SizedBox() 근데 코딩애플은 나처럼 완전 초보자가 이해하기엔 어려울 수 있다고 함 엉엉 1. 프로젝트 생성Project 이름을 숫자로만 하려니까 유효한 Dart Package Name이 아니라면서 lower case를 쓰라고 했다. test20230823으로 하니까 바로 생성됨; 1-1. Lint 끄기test/analysis_options.yaml로 들어가서 rules: 라고 적힌 부분을 찾고 4줄을 입력하라고 했다. Lint라는 걸 잠깐 끄는 용도라는데, Lin..

2023년 8월 브런치 글 피드백과 조회수 정리

https://brunch.co.kr/@designyoung Billie Young의 브런치스토리 디자이너 | 나 행복하고 싶수다 brunch.co.kr 8월 한 달 동안 글을 몰아서 3개나 발행했다. bondee 글을 제외하고 거의 2년이나 방치해뒀던 브런치라 예전에 모아뒀던 글감들을 가지고 이거라도 발행해둬야지 스스로 채찍질하며 다듬고 올렸다... 재작년에 Linear라는 제품을 분석했던 글이 작년에 Surfit 큐레이팅에 올라와서 너무 신기했는데, 그 이후로 내 브런치 링크를 디비에 저장해두셨던 건지, 새로 발견하신 건지 잘 모르겠지만,,, 무튼 올린 글 3개 모두 Surfit에 바로 다시 올라와서 신기했다. 요 몇주 다시 서핏이라는 플랫폼의 파워를 체감할 수 있었다. 3개 중 처음 올렸던 글 〈4..

☕️ 강남언니 커피챗

어제 힐링페이퍼(강남언니)에서 새로 만들 B2B SaaS 제품을 총괄하는 분을 뵈었다. 버티컬 B2B에서 처음 일할 때 겪는 막막함에 대해 잠시 얘기했는데, 스타트업 씬에서는 스타트업들이 쓰는 B2B 프로덕트가 아니면 잘 언급되지 않는다고 한 마디를 던지신 게 기억이 남는다. 보통 내 머릿속에서는 대기업이 아닌 중소기업들을 위한 솔루션들이라고 정의되어 있었는데, 그렇게도 말할 수 있었군. 집에 와서는 그게 좀더 좋은 표현이라는 생각도 들었다. Surfit도 그렇고 보통 스타트업 사람들은 스타트업 소식 위주로 알게 되니까 🤔 어쨌든 그렇기 때문에 나처럼 보수적인 분야에서 일하는 디자이너가 참 많을텐데 나 혼자만 삽질하는 기분이라 더 외로울 수밖에 없는 것 같다는 얘기로 이야기를 마쳤다 🫠

티스토리 블로그 폰트 내가 원하는 걸로 바꾸기

원래 블로그에 있던 폰트는 Noto Sans KR, Arial이었는데 Pretendard로 바꾸고 싶어서 먼저 해봤던 개발자 E님께 알려달라고 물어봤음 ㅎㅎ E님 개발 블로그 https://kkimeun.tistory.com/ 뭐라도 하자 언제까지 누워만 있을거냐 kkimeun.tistory.com 일단 블로그 설정 > 스킨 편집을 들어가면 위와 같은 화면이 뜸 우측 패널에 있는 스킨 썸네일 밑에 [html 편집]이란 버튼을 클릭 그러면 우측 패널의 뎁스가 바뀌며 이렇게 HTML, CSS, 파일업로드 3가지 탭이 보임. 여기에서 CSS 클릭! CSS 코드 아무데나 커서를 두고, 맥에서 command+F (윈도우 Ctrl+F)를 눌러 font-family 검색. E님의 지시에 따라 body와 h1 사이에 ..

Flutter 설치완. 나 이제 개자이너냐.

어제 드디어 Flutter 설치를 완료했다(?) 완전 초반 설치는 E님이 추천해준 코딩애플 아저씨의 동영상으루 시작... 1. 플러터를 깐다... 나는 macOS, M1pro라서 애플 실리콘 버전 다운로드 받았다. Flutter documentation Get started with Flutter. Widgets, examples, updates, and API docs to help you write your first Flutter app. docs.flutter.dev 2. Android Studio를 깐다... 2023년 8월 8일 기준, Android Studio는 Giraffe 버전이 최신인가보다. 일단 깐다... Download Android Studio & App Tools - Androi..

반응형